html - "transform: translateX(-50%)"与 "position: absolute"和 "left: 50%"在 Internet Explorer 中产生滚动条

Question

我想在视口(viewport)中间放置一个 main 容器。

容器是绝对定位的，因为我希望它通过使用 position: absolute;top: 0;bottom: 0 来填充整个垂直空间(我知道我可以实现类似的效果通过在 html, body, main 上使用 height:100%，但是一旦 main 的内容超过全高，main 容器不会以这些精确的 100% 拉伸(stretch)，这不是我想要的)。

因此，为了将绝对定位的 main 容器定位在视口(viewport)中间，我依赖于 transform: translateX(-50%)，它可以轻松工作 - 除了Internet Explorer，它添加了不需要的水平滚动条!

看看这支笔:

http://codepen.io/jmuheim/pen/wCzcr

有什么办法可以防止水平滚动条出现吗？ overflow-y: none 似乎不起作用。

Answer 1

几天前我遇到了同样的问题。看来这是一个错误，修复它的更简单方法是将元素从 right 而不是 left 定位。

使用您的示例，结果将是:

main {
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  width: 50%;
  background-color: red;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

您可以在那里现场试用:https://jsfiddle.net/julienvanderkluft/3udza0te/