IE6 дополнительное дополнение в нижней части
Вот базовый пример:
.too-many {
animation-name: one, two;
animation-delay: 0s, 1s, 2s, 3s, 4s;
/* the 2s, 3s and 4s will get ingored because they cannot be matched with any animation*/
}
.not-enough {
animation-name: one, two, three, four, five, six, seven;
animation-delay: 0s, 1s;
/*it's like having
animation-delay: 0s, 1s, 0s, 1s, 0s, 1s, 0s;
we repeat until we cover all the animations
*/
}
Таким образом, в основном, если у нас меньше значений, чем animation-name, мы повторяем, пока не получим одинаковое число. Если у нас больше, мы не учитываем переполнение
Та же логика применима к любым свойствам, которые могут принимать несколько значений, например, transition и background. [1116 ]
body {
margin: 0;
height: 100vh;
background-image:
linear-gradient(red, red),
linear-gradient(blue, blue),
linear-gradient(red, red),
linear-gradient(blue, blue);
background-size: 20px 20px, 50px 50px;
background-repeat: no-repeat;
background-position: top, bottom, left, right;
}Выше указано то же самое:
body {
margin: 0;
height: 100vh;
background-image:
linear-gradient(red, red),
linear-gradient(blue, blue),
linear-gradient(red, red),
linear-gradient(blue, blue);
background-size: 20px 20px, 50px 50px,20px 20px, 50px 50px;
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
background-position: top, bottom, left, right;
}Вы можете продолжать добавлять больше, и они будут игнорироваться:
body {
margin: 0;
height: 100vh;
background-image:
linear-gradient(red, red),
linear-gradient(blue, blue),
linear-gradient(red, red),
linear-gradient(blue, blue);
background-size: 20px 20px, 50px 50px,20px 20px, 50px 50px,54px 548px, 0 0, 100vh;
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat;
background-position: top, bottom, left, right,0 0,center, bottom left;
}6 ответов
В Вашем отделении существует ли изображение? Если существует изображение, существует ошибка в IE 6, который может заставить пробел в отделении создавать дополнительное дополнение в нижней части
Дополнительное дополнение обнаруживается с
<div>
<img src="myimage.jpg">
</div>
Дополнительное дополнение не обнаруживается при изменении HTML на
<div><img src="myimage.jpg"></div>
Я настоятельно рекомендовал бы взгляд на сайт positioniseverything.net и его покрытие проблем IE и обходных решений. Смотрите на раздел взлома падуба - я полагаю, что Вы найдете ответ там.
[редактирование - добавленный] смотрит здесь для проблемы на 3 пкс, объяснения и фиксирует
Для настроек поля и различия в браузере, sitepoints статья модели поля предлагает некоторое хорошее понимание также.
Вы попытались скрыть Ваш DIV переполнение? overflow:hidden;
Править: Можно также попробовать display: inline; если Вы говорите о горизонтальном продвижении.
Удостоверьтесь, что размер шрифта не создает проблему. Даже без текста в контейнерном элементе (говорят для нижнего ограничения относительно поддающегося растягиванию контейнера) IE6 все еще измерит высоту поля, не меньшего, чем размер шрифта (даже с явным набором высоты.)
Так, например, если у Вас есть HTML:
<div class="box">
<h1>Heading</h1>
<p>This is the main content.</p>
<div class="bottom"></div>
</div>
... Вам будет нужен этот CSS:
<style type="text/css">
.box {
background: url(bg-middle.jpg) repeat-y;
}
.box h1 {
background: url(bg-top.jpg) no-repeat;
}
.box .bottom {
background: url(bg-image.jpg) no-repeat; /* bottom cap image */
height: 10px; /* height of your bg image */
font-size: 1px; /* for IE6 */
}
</style>
Можно также посмотреть на что-то как таблица стилей сброса CSS, которая позволит Вам настроить значения по умолчанию, которые должны быть довольно последовательными через браузеры.