html - 叠加图像在 Chrome/FF/Edge 中有效，但在 IE 中无效

Question

我使用以下方法叠加两个图像: Jsfiddle:https://jsfiddle.net/u6y92hmL/1/

HTML:

<div class="overlay-single">
  <img class="top" src=http://lorempixel.com/100/100/>
  <img class="bottom" src=https://placehold.it/300x200>
</div>

CSS:

.overlay-single {
  position: relative;
  text-align: center;
}

.overlay-single .top {
  position: absolute;
  top: 0;
  z-index: 1;
}

在 Chrome、FireFox 和 Edge 中，它可以完美地将顶部图像粘贴到底部图像的左上角。但在 Internet Explorer 中，顶部图像是左对齐的。

有什么方法可以让 IE 以同样的方式运行吗？

Answer 1

According to w3c , 当 left 为 auto 时，绝对定位的框将准确地出现在它没有定位时应该出现的位置，这意味着 IE 做错了，需要修复

添加一个内部包装器，使其表现为内联元素(根据内容调整大小)，将其设置为相对位置，您将获得跨浏览器所需的结果。

.overlay-single { 
  text-align:center;
}
.overlay-wrapper { 
  position:relative;
  display: inline-block;
}
.overlay-single .top {
  position:absolute;
  top:0;
  z-index:1;
}

<div class="overlay-single">
  <div class="overlay-wrapper">
    <img class="top" src="http://lorempixel.com/100/100/">
    <img class="bottom" src="https://placehold.it/300x200">
  </div>
</div>