html - 绝对居中的元素在 IE 上变得困惑

Question

我正在制作一个网页，我在页面底部(视口(viewport))放置了三个元素，其中两个元素有一些偏移。除了**** 有问题的 Internet Explorer 之外，一切都很好。这是它在 chrome 或其他真实浏览器(包括 Opera、Safari、Android default、Mozilla 等)中的样子:

来自古董 IE:

这是 HTML:

<span class="subtitle-scroll">Scroll para continuar</span>
<img src="css/images/mouse.png" class="mouse">
<img src="css/images/sprite.png" alt="" class="sprite">

还有 CSS:

.subtitle-scroll {
  position:absolute;
  color:#fff;
  font-weight:100;
  font-size:24px;
  bottom:50px;
  left:0;
  right:0;
  z-index:-1;
  margin:auto;
}

.mouse {
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  width:20px;
  z-index:-1;
  margin:auto;
}

.sprite {
  max-width:100%;
  height:auto;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

Live Example

Answer 1

对 .mouse 和 .sprite 使用 margin: 0 auto 而不是 margin: auto 似乎可以解决IE 绝对居中的问题。由于您希望它底部对齐，因此没有理由在顶部和底部设置自动边距。

.subtitle-scroll {
  position:absolute;
  color:#fff;
  font-weight:100;
  font-size:24px;
  bottom:50px;
  left:0;
  right:0;
  z-index:-1;
  margin:auto;
}

.mouse {
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  width:20px;
  z-index:-1;
  margin:0 auto;
}

.sprite {
  max-width:100%;
  height:auto;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
}