覆盖图像适用于 Chrome/FF/Edge 但不适用于 IE答案

【问题标题】：Overlaying images works in Chrome/FF/Edge but not IE覆盖图像适用于 Chrome/FF/Edge 但不适用于 IE
【发布时间】：2016-06-13 18:19:09
【问题描述】：

我使用以下内容叠加两个图像： 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 以同样的方式运行吗？

【问题讨论】：

我看到了问题，但我还没有解决方案（还），但我只想指出，在这样的属性值周围省略引号是非常非常危险的。请养成始终在属性值周围使用引号的习惯（即使您很确定不需要它们），这样您就不会遇到问题。
@Mr Lister，谢谢。我想说当我为示例进行复制粘贴时，我手指粗了，但是当我回过头来查看原始代码时，显然我确实忽略了它们。哎呀...

标签： html css internet-explorer overlay

【解决方案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>

【讨论】：

感谢您的解决方案和解释。我知道我是新手，但至少我不会发疯。