Internet Explorer的滚动条中带有“位置：绝对”和“左：50％”的“转换：translateX（-50％）”

Question

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

容器是绝对定位的，因为我希望它通过使用来填充整个垂直空间position: absolute;top: 0;bottom: 0（我知道我可以通过使用height:100%on 来达到类似的效果html, body, main，但是一旦的内容main超过了整个高度，main容器就不会以这些确切的100％拉伸，这不是我想要的）。

因此，要将绝对定位的main容器放置在视口的中间，我依靠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/