Проблема со списками в IE

9 March, 2008

XHTML/CSS, Полезности

Настоящие верстальщики должны слегка поморщиться вспомнив об этом баге.

Проблема с которой сталкивался, наверное, каждый. Самая банальная ситуация, вертикальное меню, и в дизайне есть хавер-эффект для пунктов меню (или другая причина сделать их блочными).
html:

  1. <ul>
  2. <li><a href="#"></a></li>
  3. </ul>

css:

  1. li a{
  2. display:block;
  3. }

И вуаля, вот что имеем в ИЕ6, например:

Отступы между элементами списка в IEОтступы между элементами списка в IE

Примеры решений

Чтобы разобраться с этой проблемой раз и навсегда, я перебрал все возможные рабочие варианты, из них отобрал 7 наиболее удачных на мой взгляд. Ими и хочу пользоваться в будущем. Решения обычно сводятся к haslayout для LI, A. Или свойству vertical-align, или удалению пробелов, или изменению line-height.

Из этих вариантов у меня в ИЕ6 рабочими оказались такие: в первой колонке 3, 4, 5, 7, 8. Во второй: все кроме нулевого.

Колонки отличаются только размером line-height. Для первой это 1, для второй 1.4.
Значения 1.13-1.14 — являются граничными.

Резюме, или как с этим воевать

После кучи экспериментов пришел к тому же выводу, что и Bruno Fassino, глюки с непонятными отступами условно можно разделить на 3 категории:

отступы чем вызвано чем лечить
Большие отступы a{display:block} удалить пробелы в коде
или haslayout для a
(этот баг исправлен в IE7)
Маленькие отступы li{haslayout} li{vertical-align:top}
Маленькие отступы (второй вид) маленький line-height + haslayout для li или а увеличить line-height

Наконец-то я задокументировал самое тёмное для меня место в багах ИЕ =)

IE8 (не повторять на живых проектах!)

Буквально сегодня, с подачи Thierry Koblentz, узнал хак для IE8. Это скорее любопытный факт, нежели то, что нужно использовать. Тем не менее этот CSS увидит только IE8:

/*/ #nav a {position:relative;} /**/ 

Фиксит проблему с отступами между элементами списка в ИЕ8. Исправить на стороне броузера, наверное, было очень трудно. Будем надеяться, что баг с отступами в списках исправят одновременно с этим хаком. Я лично отсабмитил эту проблему разработчикам.

Ссылки

Если у вас есть чем дополнить, буду рад выслушать и проапдейтить пост!

P.S.: под haslayout я имею ввиду width, height, zoom, position. Любой из этих параметров является триггером этого свойства для блока.

XHTML/CSS, Полезности

35 комментариев к “Проблема со списками в IE”

Vitaly Harisov | 1. 9 March, 2008

Под MSIE8 не надо хакать, надо сразу репортить в виде минимального тест-кейса. Время на исправление ещё есть.

akella | 2. 9 March, 2008

Абсолютно верно, спасибо, это моя политическая ошибка. Подготовил тесткейс, отсабмичу. Немного поправил пост.
Оставил хак из чисто исторических соображений. Вдруг кого-то это позабавит в 2125 году.

pepelsbey | 3. 10 March, 2008

Есть ещё обалденный трюк:

LI { display:inline-block; }
LI { display:block; }

Причём пишется именно так, в разных группах правил. Иногда помогает ) Стащил у Роджера нашего Йохансена.

akella | 4. 10 March, 2008

Добавил на тестовую страничку и этот вариант=) Номер 8. Спасибо!

Сам по себе код не сработал (остались маленькие отступы), но добавив vertical-align:top – все стало как надо :).
Кстати, Бруно высказал мысль что когда li{имеет haslayout}, то ведут они себя как inline-block, которым как раз не хватает вертикального выравнивания. Вот и получается подтверждение теории =)

Del'ka | 5. 11 March, 2008

очень интерестно!

хотя с такими проблемами несталкивался, хотя читал по них… ну как то на простых списках не встречались, а на сложных оно само-собой hasLayout-ные свойства и для li и для a требуются.

хотя… вот, вспомнил, давным-давно ( с год назад наверно) добавил себе в ie6.css такое правило:
ul li {position: relative}
насколько помню добавил потому что лечило многие странные проблемы…
может по-этому и не сталкиваюсь почти…

для 5.5 добавляю ul li {zoom: 1}
для 5.0 сбрасываю position и возращаю layout ul li {position: static; height: 1%}

кстати все примеры в твоём тесте у меня в 6-ке отобразились правильно

akella | 6. 11 March, 2008

Это могло быть из-за того, что твоя шестерка уже юзает движок 7рки, или даже 8ки. Если ты ее поставил =). Хотя все равно странно, у меня Windows XP Pro, IE6 стандартный (не Standalone). А у тебя какой комплект?

PS: про ие5* я стараюсь как-то начинать забывать =) Хотя, понимаю, не все могут это себе позволить.

Del'ka | 7. 11 March, 2008

на работе (где и идёт основная работа): базовый IE6, standalone IE7 (по мануалу из http://tredosoft.com/IE7_standalone) и standalone 5.0 и 5.5 (из multiple-ie-setup)

дома: базовый IE7 и standalone IE5.0/5.5/6.0 (multiple-ie)

вот ещё 8-ку хочу попробовать в standalone расковырять.

проверил на работе щас – всё равно все примеры работают. А тут у меня чистый IE6.

Юрко | 8. 11 March, 2008

Маячня! Не працює в Віслючку під Мак ОС Х. Не перевіряв, але певен!

seriy | 9. 15 March, 2008

a{display:block}
to lechica ystanovkoi shirini dlya ( a{width:100px} )

akella | 10. 16 March, 2008

Указание ширины как раз и является триггером hasLayout. Но не всегда достаточно указания ширины, хотя это и убирает “большие” отступы. Маленькие все еще могут иметь место, при маленьком line-height, или заданной ширине, для, например LI.

Сергей | 11. 21 March, 2008

С IE вечно какие-то проблемы бывают.

Владик | 12. 22 March, 2008

Мне кажется, что про IE давно уже пора забыть как про браузер – у него постоянно что-то не так. (

Наталья | 13. 23 March, 2008

Выход нового IE еще больше доставит проблем верстальщикам… Спасибо за совет, в коментах приведен еще одни интересный вариант, pepelsbey, вам тоже спасибо.

Del'ka | 14. 24 March, 2008

сегодня закончил один красивый макет, и для IE5.0 действительно помог vertical-align:top ! – были маленькие отспуты, а с нми – пропали и стало как надо)

спасибо!

Del'ka | 15. 24 March, 2008

кстати с различной работой IE6 в оригинале и в standalone несталкивался

зато однозначно могу сказать что standalone IE5 и 5.5 при дефолтном IE7 подглючивают изображение (оно бывает отрисовывается не всё, а только если подвигаешь края браузера.
при дефолтной 6-ке всё ок.

Theo | 16. 4 April, 2008

Часто помогает пофиксить большинство самый неожиданных глюков для IE6,5.5.5 установка свойств height:1% или/и position:relative для самих элементов, или родителей (требуется каждый раз небольшой эксперимент).

Theo | 17. 4 April, 2008

А, ещё. Для полноценного тестирования standalone не подходят – лично часто натыкался на несоответствие реального IE6 и standalone. Причина в “подхватывании” системных dll от нового IE.
Выход: ставим VMWare, ставим на неё операционку (Win98/2000), клонируем, на каждый клон ставим нужный IE. Имею в результате: IE5, IE5.5, IE6, IE7, Opera, Safari, FireFox. 99% броузеров тестом покрываю.

akella | 18. 4 April, 2008

Абсолютно верно. Подходит указание heigth, width, zoom, position:relative — все эти свойства являются триггерами упомянутого в посте hasLayout.

sonika | 19. 4 April, 2008

Спасибо за пост, даже не догадывалась, что возможно столько способов решения этой проблемы!

Coldman | 20. 10 April, 2008

Большие отступы можно лечить если оставить пробел перед закрытием тега /А, удобней чем писать все в одну строку ))

akella | 21. 10 April, 2008

Да, этот вариант на тестовой страничке под номером 3. Но мне не нравится идея вносить правки в ХТМЛ, к тому же за этим вряд ли потом уследят на рабочем проекте, по опыту.

Сергей | 22. 4 May, 2008

Спасибо за советы. Первое впечатление от 8 IE были не приятные особенно из-за этой проблемы.

Yevgesha | 23. 8 May, 2008

Привет всем, случайно забрел…
Может я туплю… Но LI это по умолчанию display:block; поэтому для IE это не bug
А вот просто так…
li a{ margin:0;padding:0; }, ну или подробно с отступами , если душа лежит или есть нужда. И все… и где проблема?

akella | 24. 8 May, 2008

Тут нигде и не упоминается задание для li{display:block}, только для “li a”.
И обнуление margin и padding не поможет, вы все равно увидите отступы в ИЕ. Вы можете это легко проверить прямо сейчас, для удобства я показал как это выглядит в ИЕ, на первой картинке в посте.

Del'ka | 25. 28 May, 2008

хм, а теперь отображаются глюки в ИЕ)
однако))
хотя ничего ж неменял))

к статье часто возвращаюсь) спасибо!

Gan | 26. 15 July, 2008

Использую обычно для этого это cпособ hasLayout! Помогает! Но возникает другая проблема, когда например в спискe (ul) присвоено значение флоат и не указана ширина то список и активная область в каждой ссылке ужимается до самого размера каждой ссылки(обычно слова-ссылки разной длины) в нормальных браузерах! Тоесть активная область ссылки равняется длине слова! Это в нормальных браузерах!
При включении haslayaut в ie активная область ссылки на всю ширину браузера! Получается надо указать для списка ul ширину, но это не выход так как слова в списках разной длины и будет получаться так что у коротrих ссылок активная область будет гораздо больше по ширине чем само слово! Что бы это исправить надо еще мутные замуты!

p.s. Понятней и короче объяснить не смог

Гриша | 27. 21 August, 2008

спасибо
display:inline-block; width:100%;
помогло

верстак | 28. 3 October, 2008

мне вот с line-height понравилось, а вот position:relative
вообще ничего не делает!
мы тут бьемся в конвульсиях над ие
и билли нам новуюю ие готовит с новыми багами спасибо ему =)
а Респект вам ребята полезное дело делаете.

cssing :: Архив :: CSSing 2008 | 29. 30 December, 2008

[…] Проблема со списками в IE — описание и решение стандартного бага со списками в ИЕ […]

SelenIT | 30. 5 February, 2009

Буквально вчера впервые осозанно столкнулся с “маленькими отступами” при верстке многоуровневого выпдающего меню (UL > LI > A+UL и т.д.). Удивительное дело — при совершенно одинаковом коде и стилях самих LI и A проблема вылезла исключительно в элементах, содержащих дочерние UL (причем вне зависимости от их display и visibility). Ничего не помогало, пока не вспомнил про vertical-align. Наблюдал в IE6-7 (в 8RC1 — все в норме).

Richard | 31. 6 March, 2009

Хочу поделиться еще одним способом. Он, правда, немного “черезжопный”, но это не редкость для ИЕ. И сразу говорю, что он хуже уже представленных здесь. Вот:
li { foat:left; width:100%;}
Мне часто помогал, но вставала проблема с флоатами, которую обычно решал через
ul { overflow:hidden; zoom:1;}
Это не лучший способ, но он работает =)

ВНИМАНИЕ!
Для тех кто еще не знает. Дабы избежать в будущем проблем с IE8, компания Майкрософт позаботилась о том, чтобы с помощью определенного мета-тега можно было задавать способ рендера ИЕ, то есть эмулировать рендер ИЕ6 или 7. Я применяю эмулирование под ИЕ7 и выглядет это так:

НО! у этого тега есть ограничения, перед этим тэгом в хедере может стоять только другой метатег или тайтл. Подробнее можно почитать у Пепелсбея: http://pepelsbey.net/2008/11/surprise-box/

Richard | 32. 6 March, 2009

Кажется, я забыл что нужно заэскейпить теги =)
Вот как это выглядет:
<meta http-equiv=”X-UA-Compatible” content=”EmulateIE7″ />

max | 33. 22 December, 2009

Довольно поздно наткнулся на Ваш пост, у меня проблема решилась установкой
li{border-bottom: 1px;}

Алексей | 34. 11 February, 2010

А я просто использую такой метод: * html ul#menu li{height:1%;}

Идеи | 35. 7 June, 2010

Очень просто и красиво получилось. Спасибо, наконец-то решил проблему.

Оставить комментарий