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，当左边是自动时，绝对定位的框将出现在它未定位的确切位置，这意味着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>

覆盖图像可在Chrome / FF / Edge中使用，但不适用于IE

1 个答案: