Свойство CSS3 transform работает по-разному в Internet Explorer
Я использую следующий CSS, чтобы центрировать div в середине моей страницы:
.someWrapper {
width: 100%;
height: 100%;
position: relative;
}
.centredDiv {
width: (some width);
height: (some height)
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Я тестировал это в Chrome, Firefox и Safari, и он работает по назначению. Тем не менее, в Internet Explorer (тестирование на IE11), когда он центрирует div в середине окна, IE, похоже, считает, что все еще есть невидимый "призрак div" 50% и 50% вниз, который не был преобразован.
Это приводит к созданию целого пучка белого переполнения и ненужных полос прокрутки в нижнем правом углу экрана. Если я включу переполнение: скрытое, это может устранить проблему, но это не выполнимый вариант на моем веб-сайте.
Итак, почему IE делает это и есть ли простой способ обойти его?
EDIT: Следующий код иллюстрирует проблему. Откройте код в Chrome или Firefox, нет переполнения. Откройте его в IE (тестирование в IE11), и вы увидите переполнение, вызывающее пустое пространство и полосы прокрутки вниз и вправо.
<!DOCTYPE HTML>
<html>
<head>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100%;
position: relative;
}
#centred {
width: 90%;
height: 90%;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="wrapper">
<div id="centred">
Hello world!
</div>
</div>
</body>
</html>
Ответы
Ответ 1
Простой подход
Вместо позиционирования из top и left, вместо позиции bottom и right. После того, как вы это сделали, просто измените ваши переводы -50% на положительные 50%. Это приведет к удалению переполнения. Вы можете увидеть эти изменения в действии здесь: http://jsfiddle.net/bd17gsss/
Стоит отметить, что эта ошибка все еще подана, и наша команда все равно будет уделять ей должное внимание, когда время и циклы позволят нам это сделать.
Оригинальный ответ
В этой конкретной демонстрации появляется ошибка компоновки с position: absolute. Он ведет себя подобно position: relative, когда этого не должно быть. Я открыл ошибку по этой проблеме, чтобы команда Internet Explorer провела дальнейшие исследования.
В настоящее время вы можете переключить свое значение позиции от absolute до fixed, которое появляется для правильного отображения центрированного элемента. Это не позволяет вам использовать фиксированный набор измерений снова и снова и вместо этого позволяет использовать этот подход как класс стиля .modal общего назначения, который будет центрировать все, к чему он применяется.
Очевидное предостережение с этим изменением состоит в том, что ваш элемент позиционируется в соответствии с окном просмотра и больше не является самим документом. Это эффективно заморозит его на экране.
.modal {
position: fixed;
top: 50%; left: 50%;
background-color: red;
transform: translate(-50%, -50%);
}
Чтобы продемонстрировать успех, этот подход имеет различные размеры, мы можем прокрутить несколько наборов примеров и проверить рендеринг элемента, чтобы он был правильно центрирован:
(function () {
var xandy,
index = 0,
modal = document.querySelector( ".modal" ),
sizes = [
{ x: "50%" , y: "30%" },
{ x: "400px", y: "288px" },
{ x: "25vw" , y: "75vh" },
{ x: "90%" , y: "90%" }
];
setInterval(function changeSize () {
xandy = sizes[ index++ % sizes.length ];
modal.style.width = xandy.x;
modal.style.height = xandy.y;
}, 1000 );
}());
Конечный результат можно посмотреть здесь: http://jsfiddle.net/jonathansampson/c00u5ev8/
Ответ 2
Если на самом деле просто ответил на этот вопрос в другом потоке, вы можете использовать display: table; и display: table-cell; для решения этой проблемы (работает также кросс-браузер!), см. мой код в реальном времени: http://codepen.io/TheDutchCoder/pen/GggWqP
В вашем случае это будет:
#wrapper {
display: table;
width: 100%;
height: 100%;
}
#centred {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Ответ 3
Ваш код слишком сокращен и без рабочего примера трудно предложить какие-либо советы. Меня беспокоит часть (some dynamic height/width), т.е. Это поражает меня как место, где может быть ваша проблема.
Для справки вы можете проверить собственное объяснение Microsoft Transform в IE.
Ответ 4
Для меня проблема с переводом, не работающим в IE 11, была просто в том, что страница автоматически запускалась в режиме совместимости, заставляя IE 11 работать, как если бы это был более старый браузер, который не поддерживает перевод в CSS.
Мое решение было просто поместить этот тег в голову:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
....
Это говорит, что IE запускается с использованием "последнего" кода, что по существу означает, что IE 11 отображает страницу с кодом IE 11, а не как более старую версию браузера.
Если вы хотите заморозить совместимость с какой-то определенной версией IE, вы можете сделать это с помощью этого тега, используя разные значения содержания. Значение "IE-Edge" сообщает ему использовать последний доступный код.
Если вы хотите посмотреть, отображается ли ваша страница в режиме совместимости, нажмите F12, чтобы открыть инструменты разработчика в браузере, перейдите на вкладку "Консоль" и перезагрузите страницу. На вкладке консоли будет указано что-то вроде:
http://yoursite.com is running in Compatibility View because ...
если он действительно работает в режиме совместимости.
Ответ 5
Просто добавьте transition: all .2s ease-in-out; под свою линию преобразования.
Ответ 6
Если кому-то еще все еще нравится пытаться обойти эту проблему (видя, что ошибки Internet Explorer никогда не исправляются, потому что вместо этого мы все любим обходить их), и вы хотели бы использовать position: relative; вместо position: absolute; или сверху и слева, а не снизу и справа, попробуйте это вместо:
.centredDiv {
position: relative;
top: calc(50% - 100vh);
left: calc(50% - 100vw);
transform: translate(-50%, -50%) translate(100vw, 100vh);
}
Можно использовать 100 видов высоты/ширины вида или произвольное значение в пикселях, представляющее максимальную теоретическую высоту/ширину прокрутки, чтобы верхние/левые значения никогда не переполняли родительский объект, а затем просто смещали его в преобразовании.
Если бы я был в лифте с Гитлером, Сталиным и Internet Explorer, и у меня был пистолет только с одной пулей... Я бы убил Internet Explorer.
