Список ul c исчезающей фоновой картинкой в IE 6
February 3rd, 2009 by Yuriy DrozdovНедавно столкнулся с проблемой исчезновения заднего фона у элемента списка в IE 6. Верстал я сайдбар темы для wordpress и был такой кусок кода (на самом деле он был другой, но для упрощения пусть он будет именно такой):
-
#sidebar {
-
float:left;
-
background: #fffdd5;
-
position:relative;
-
}
-
#sidebar ul {
-
margin:0;
-
padding:10px;
-
list-style-image:none;
-
list-style-type:none;
-
}
-
.mail {
-
background:url('email.png') 90% 2px no-repeat;
-
padding-right:22px;
-
}
Выше был css код, ниже то, что было в html части.
В результате можно было увидеть такое в Firefox:
И, соответственно, такую картину мы можем увидеть в IE 6, причем задний фон у элемента мог как внезапно появиться, например, при скролинге или изминение размера окна, так и исчезнуть при аналогичных действиях.
Решение проблемы
Лечится подобное методом тыка установкой свойства position:relative для списка.
-
#sidebar ul {
-
margin:0;
-
padding:10px;
-
list-style-image:none;
-
list-style-type:none;
-
position:relative;
-
}
Вообще, подобные неурядицы с IE 6 связаны со свойством hasLayout элемента, которое не установлено в true. Как только установить его в true, многие проблемы в IE 6 пропадают. Осуществить это можно несколькими способами:
- задать position:absolute
- установить свойство float равным left или right
- добавить свойство display: inline-block
- Установить значение ширины или высоты (отличное от auto)
- указать zoom:1, не забыв воспользоваться условными комментариями, чтобы это свойство видел только IE
Почитать подробнее о свойстве hasLayout можно здесь или на сайте msdn. Любителям великого и могучего языка советую заглянуть на хабр и ознакомится с переводом первого источника. Также можно посмотреть описание подобного бага на positioniseverything.net.
Спасибо Никите за комментарии к статье.
---------
Читайте каждый день новости про новые компьютерные гаджеты с usb-интерфейсом на 2usb.ru. Чтобы вашу рекламную кампанию запомнили, закажите оригинальные vip сувениры из нашего каталога.
Похожие статьи:
- Нет похожих статей
Ты гений! Я как раз вчера вечером мучался с такой фигней. Так и оставил, решив добить потом. Теперь я знаю что делать )
Ох, уж этот ИЕ. Сколько еще он таит в себе… Спасиб, в общем ))
хе-хе, тебе спасибо за хвалебный отзыв
Просто, действительно очень актуально. Я вчера, сидя без инета, всю голову сломал ))
Свойство назвается hasLayout.
Обычно его включают с помощью height: 1% или zoom: 1. Всё-таки с позиционированием лучше не злоупотреблять.
Тут можно поспорить.
Судя по всему свойсвтво называется “layout “, а “hasLayout” всего лишь флаг, который показывает есть ли данное свойство у объекта.
Можно. Но нет смысла. Если вдаваться в терминологию, то ответ в репозитории — Property «hasLayout» — http://msdn.microsoft.com/en-us/library/ms533776.aspx
Разницы в названии нет. Есть суть.
Уговорил, сейчас исправлю в статье
А само понятие «layout» это принцип, по которому отрисовываются те или иные элементы в IE.