IE showing horizontal scrollbar after dom element transformed

Question

I've used the following css in various places on my site:

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糟透了.