IE показывает горизонтальную полосу прокрутки после преобразования элемента dom

Я использовал следующие css в разных местах на моем сайте:

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

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

При запуске в Internet explorer вы увидите горизонтальную полосу прокрутки, которая, как представляется, игнорирует преобразование относительно общей ширины страницы.

Ответы

Ответ 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 отстой.