文本对齐中心和绝对定位在 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; 添加到 span。

UPD：Chrome 中的屏幕截图：

IE 中的截图：

您可以在 IE 中看到 span 位于左侧，而在 Chrome 中位于居中。 span 的内容仍然与中心对齐，但 span 宽度太小而看不到它！将宽度添加到 span 并查看里面的内容将对齐到中心。 小提琴：https://jsfiddle.net/u9z76r6q/3/ 在 IE 中观看

UPD2：实际上在 Chrome 中 span 也不在中心。它的行为类似于left: 50%;。它的左边框在中间。