IE转换后显示水平滚动条的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％（向右）并使用变换向左发送，而是完全相反。 我从未考虑过它，但如果你将一个元素放在最左边，它不会影响页面宽度或滚动条。

奇怪的是，如果你做垂直等效的居中，通过使用前50％和平移（0px，-50％），它似乎不会影响垂直滚动条。

只有Internet Explorer在以这种方式使用转换时才会重新计算水平边界。很讨厌。 IE糟透了。