DOM 元素转换后 IE 显示水平滚动条

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 很烂。