html - IE 在 dom 元素转换后显示水平滚动条

Question

我在网站的不同位置使用了以下 CSS:

http://jsfiddle.net/uycq29mt/1/

.a {
    position:absolute;
    background:red;
    width:600px;
    height:100px;
    left:50%;
    transform: translate(-50%);
}

在 Internet Explorer 中运行时，您会注意到一个水平滚动条似乎忽略了关于页面总宽度的转换。

Answer 1

有一个简单的解决方案:

http://jsfiddle.net/uycq29mt/2/

.a {
    position:absolute;
    background:red;
    width:600px;
    height:100px;
    right:50%;
    transform: translate(50%);
}

我没有将元素向左移动 50%(向右)并使用变换将其向左发送，而是恰恰相反。直到现在我才考虑过，但如果将元素放在最左边，它不会影响页面宽度或滚动条。

奇怪的是，如果你使用 top 50% 和 translate(0px, -50%) 进行垂直居中，它似乎不会影响垂直滚动条。

当以这种方式使用转换时，似乎只有 Internet Explorer 不会重新计算水平边界。很烦人。 IE 很糟糕。