У меня есть div с margin-top:-200px. Я хочу, чтобы div двигался вверх/позади div над ним.
Отлично работает во всех браузерах, кроме IE. margin-top:200px работает, поэтому я знаю, что это не проблема с развалом маржи.
Есть ли ошибка, о которой я не знаю?
IE не любит отрицательные поля и не отображает их должным образом. Расположите свои элементы относительно или абсолютно и используйте top: -200px.
Примечание. Позиционирование может значительно изменить макет, и вам, возможно, придется переделать ваши стили.
Отрицательный край скрывает div... Вот трюк используйте zoom: 1, position: relative
Проблема:
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}
в IE красная область панели инструментов div скрывается. даже мы используем zoom: 1. Чтобы избавиться от этой проблемы, нам нужно добавить позицию: относительная тоже.
Решение:
поэтому ваш класс css станет
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}
Если вышеизложенное не помогает: убедитесь, что у вас отключен div. Теперь добавьте ширину 100% в div-div и поместите его влево. Как это. Избавился от всего моего отрицательного поля, то есть беды...
div.container {}
div.offender /*inside div.container*/ {
width: 100%;
float: left;
margin-bottom: -20px; /* ie fix */
zoom: 1; /* ie fix */
position: relative; /* ie fix */
display: block;
}
задайте позицию как относительную. рекомендуется использовать встроенный стиль. Это может вызвать некоторые проблемы, если вы используете внешний css.
Чтобы поддерживать отрицательные поля в IE, я исправил схожие проблемы с display: table;. Другие исправления, такие как zoom: 1; и position: relative;, не всегда работают (по крайней мере, в моем опыте). Если вы хотите добавить этот стиль в IE, я бы предложил использовать https://modernizr.com/
// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; }