テキストアラインメントの中心と絶対位置がIE-11で同時に動作しないのですか？

Question

次のスクリプト（https://jsfiddle.net/u9z76r6q/2/）はIE-11の画像をセンタリングしない：矢印画像が中央に配置され、他のすべての近代的なブラウザで

.container { 
 
    display: block; 
 
    width: 400px; 
 
    height: 200px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 
span { 
 
    position: absolute; 
 
    
 
}

<a href="#" class="container"> 
 
    <span> 
 
    <img src="https://redarrowmedia.files.wordpress.com/2012/03/arrow-logo1.png" alt="" width="40px" height="40px">  
 
    </span> 
 
    </a>

を。これはInternet Explorerのバグですか？

Answer 1

絶対配置された要素は親の幅をとらないため、その幅は内容によって異なります。ブラウザが異なると、測位スパンが異なるため、結果が異なります。 width: 100%; left: 0;をスパンに追加します。

UPD：Chromeでスクリーンショット：IEで

スクリーンショット：あなたはIEスパンで見ることができます

が中央にChromeで左中に配置されています。 スパンの内容はまだ中央に揃えられていますが、スパンの幅が小さすぎて表示できません。スパンに幅を加え、内部のコンテンツが中央に揃うようにします。 フィドル：https://jsfiddle.net/u9z76r6q/3/ IEで見る

UPD2：実際にはChromeのスパンも中央にありません。それはleft: 50%;のように振る舞います。その左の境界線は中央にあります。