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

08 Mar, 2008

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

Проблема с которой сталкивался, наверное, каждый. Самая банальная ситуация, вертикальное меню, и в дизайне есть хавер-эффект для пунктов меню (или другая причина сделать их блочными).
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. Любой из этих параметров является триггером этого свойства для блока.

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

1.Алексей | 11 Feb, 2010
А я просто использую такой метод: * html ul#menu li{height:1%;}
2.max | 22 Dec, 2009
Довольно поздно наткнулся на Ваш пост, у меня проблема решилась установкой li{border-bottom: 1px;}
3.pepelsbey | 10 Mar, 2008
Есть ещё обалденный трюк: LI { display:inline-block; } LI { display:block; } Причём пишется именно так, в разных группах правил. Иногда помогает ) Стащил у Роджера нашего Йохансена.
4.Vitaly Harisov | 09 Mar, 2008
Под MSIE8 не надо хакать, надо сразу репортить в виде минимального тест-кейса. Время на исправление ещё есть.
5.akella | 09 Mar, 2008
Абсолютно верно, спасибо, это моя политическая ошибка. Подготовил тесткейс, отсабмичу. Немного поправил пост. Оставил хак из чисто исторических соображений. Вдруг кого-то это позабавит в 2125 году.
6.akella | 10 Mar, 2008
Добавил на тестовую страничку и этот вариант=) Номер 8. Спасибо! Сам по себе код не сработал (остались маленькие отступы), но добавив vertical-align:top - все стало как надо :). Кстати, Бруно высказал мысль что когда li{имеет haslayout}, то ведут они себя как inline-block, которым как раз не хватает вертикального выравнивания. Вот и получается подтверждение теории =)
7.Del'ka | 11 Mar, 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-ке отобразились правильно
8.akella | 11 Mar, 2008
Это могло быть из-за того, что твоя шестерка уже юзает движок 7рки, или даже 8ки. Если ты ее поставил =). Хотя все равно странно, у меня Windows XP Pro, IE6 стандартный (не Standalone). А у тебя какой комплект? PS: про ие5* я стараюсь как-то начинать забывать =) Хотя, понимаю, не все могут это себе позволить.
9.Del'ka | 11 Mar, 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.
10.Юрко | 11 Mar, 2008
Маячня! Не працює в Віслючку під Мак ОС Х. Не перевіряв, але певен!
11.seriy | 15 Mar, 2008
a{display:block} to lechica ystanovkoi shirini dlya ( a{width:100px} )
12.akella | 16 Mar, 2008
Указание ширины как раз и является триггером hasLayout. Но не всегда достаточно указания ширины, хотя это и убирает "большие" отступы. Маленькие все еще могут иметь место, при маленьком line-height, или заданной ширине, для, например LI.
13.Сергей | 21 Mar, 2008
С IE вечно какие-то проблемы бывают.
14.Владик | 22 Mar, 2008
Мне кажется, что про IE давно уже пора забыть как про браузер - у него постоянно что-то не так. (
15.Наталья | 23 Mar, 2008
Выход нового IE еще больше доставит проблем верстальщикам... Спасибо за совет, в коментах приведен еще одни интересный вариант, pepelsbey, вам тоже спасибо.
16.Del'ka | 24 Mar, 2008
сегодня закончил один красивый макет, и для IE5.0 действительно помог vertical-align:top ! - были маленькие отспуты, а с нми - пропали и стало как надо) спасибо!
17.Del'ka | 24 Mar, 2008
кстати с различной работой IE6 в оригинале и в standalone несталкивался зато однозначно могу сказать что standalone IE5 и 5.5 при дефолтном IE7 подглючивают изображение (оно бывает отрисовывается не всё, а только если подвигаешь края браузера. при дефолтной 6-ке всё ок.
18.Theo | 04 Apr, 2008
Часто помогает пофиксить большинство самый неожиданных глюков для IE6,5.5.5 установка свойств height:1% или/и position:relative для самих элементов, или родителей (требуется каждый раз небольшой эксперимент).
19.Theo | 04 Apr, 2008
А, ещё. Для полноценного тестирования standalone не подходят - лично часто натыкался на несоответствие реального IE6 и standalone. Причина в "подхватывании" системных dll от нового IE. Выход: ставим VMWare, ставим на неё операционку (Win98/2000), клонируем, на каждый клон ставим нужный IE. Имею в результате: IE5, IE5.5, IE6, IE7, Opera, Safari, FireFox. 99% броузеров тестом покрываю.
20.akella | 04 Apr, 2008
Абсолютно верно. Подходит указание heigth, width, zoom, position:relative — все эти свойства являются триггерами упомянутого в посте hasLayout.
21.sonika | 04 Apr, 2008
Спасибо за пост, даже не догадывалась, что возможно столько способов решения этой проблемы!
22.Coldman | 10 Apr, 2008
Большие отступы можно лечить если оставить пробел перед закрытием тега /А, удобней чем писать все в одну строку ))
23.akella | 10 Apr, 2008
Да, этот вариант на тестовой страничке под номером 3. Но мне не нравится идея вносить правки в ХТМЛ, к тому же за этим вряд ли потом уследят на рабочем проекте, по опыту.
24.Сергей | 04 May, 2008
Спасибо за советы. Первое впечатление от 8 IE были не приятные особенно из-за этой проблемы.
25.Yevgesha | 08 May, 2008
Привет всем, случайно забрел... Может я туплю... Но LI это по умолчанию display:block; поэтому для IE это не bug А вот просто так... li a{ margin:0;padding:0; }, ну или подробно с отступами , если душа лежит или есть нужда. И все... и где проблема?
26.akella | 08 May, 2008
Тут нигде и не упоминается задание для li{display:block}, только для "li a". И обнуление margin и padding не поможет, вы все равно увидите отступы в ИЕ. Вы можете это легко проверить прямо сейчас, для удобства я показал как это выглядит в ИЕ, на первой картинке в посте.
27.Del'ka | 28 May, 2008
хм, а теперь отображаются глюки в ИЕ) однако)) хотя ничего ж неменял)) к статье часто возвращаюсь) спасибо!
28.Gan | 15 Jul, 2008
Использую обычно для этого это cпособ hasLayout! Помогает! Но возникает другая проблема, когда например в спискe (ul) присвоено значение флоат и не указана ширина то список и активная область в каждой ссылке ужимается до самого размера каждой ссылки(обычно слова-ссылки разной длины) в нормальных браузерах! Тоесть активная область ссылки равняется длине слова! Это в нормальных браузерах! При включении haslayaut в ie активная область ссылки на всю ширину браузера! Получается надо указать для списка ul ширину, но это не выход так как слова в списках разной длины и будет получаться так что у коротrих ссылок активная область будет гораздо больше по ширине чем само слово! Что бы это исправить надо еще мутные замуты! p.s. Понятней и короче объяснить не смог
29.Richard | 06 Mar, 2009
Кажется, я забыл что нужно заэскейпить теги =) Вот как это выглядет: <meta http-equiv="X-UA-Compatible" content="EmulateIE7" />
30.Richard | 06 Mar, 2009
Хочу поделиться еще одним способом. Он, правда, немного "черезжопный", но это не редкость для ИЕ. И сразу говорю, что он хуже уже представленных здесь. Вот: li { foat:left; width:100%;} Мне часто помогал, но вставала проблема с флоатами, которую обычно решал через ul { overflow:hidden; zoom:1;} Это не лучший способ, но он работает =) ВНИМАНИЕ! Для тех кто еще не знает. Дабы избежать в будущем проблем с IE8, компания Майкрософт позаботилась о том, чтобы с помощью определенного мета-тега можно было задавать способ рендера ИЕ, то есть эмулировать рендер ИЕ6 или 7. Я применяю эмулирование под ИЕ7 и выглядет это так: НО! у этого тега есть ограничения, перед этим тэгом в хедере может стоять только другой метатег или тайтл. Подробнее можно почитать у Пепелсбея: http://pepelsbey.net/2008/11/surprise-box/
31.Гриша | 21 Aug, 2008
спасибо display:inline-block; width:100%; помогло
32.верстак | 03 Oct, 2008
мне вот с line-height понравилось, а вот position:relative вообще ничего не делает! мы тут бьемся в конвульсиях над ие и билли нам новуюю ие готовит с новыми багами спасибо ему =) а Респект вам ребята полезное дело делаете.
33.cssing :: Архив :: CSSing 2008 | 30 Dec, 2008
[...] Проблема со списками в IE — описание и решение стандартного бага со списками в ИЕ [...]
34.SelenIT | 05 Feb, 2009
Буквально вчера впервые осозанно столкнулся с "маленькими отступами" при верстке многоуровневого выпдающего меню (UL > LI > A+UL и т.д.). Удивительное дело — при совершенно одинаковом коде и стилях самих LI и A проблема вылезла исключительно в элементах, содержащих дочерние UL (причем вне зависимости от их display и visibility). Ничего не помогало, пока не вспомнил про vertical-align. Наблюдал в IE6-7 (в 8RC1 — все в норме).
35.Идеи | 07 Jun, 2010
Очень просто и красиво получилось. Спасибо, наконец-то решил проблему.
36.Charlesjak | 30 Jan, 2021
В Случае Если платформа довольно полон, в таком случае совершенно никак не обладает практически никакого значения совершать выдвижные ящики такого рода ведь глубины. Рациональнее совершить их типичных песок овражный стоимость объемов, но сохранившееся роль завоевать отвесными концепциями сохранения, никак не выступающими надо поверхностью подия. Весьма увлекательным интерьерным заключением имеют все шансы быть подобные концепции сохранения, допуск ко каким исполняется поверх. Во их возможно разместить украшающие компоненты: многоцветные камешки, коллекция растений, коллекцию бабочек также прикрыть поверх здоровым стеклом, никак не опасающимся крупных нагрузок. Платформа, замкнутый ширмой либо расцепной загородкой, преобразуется во раздельное здание.
37.Charlesjak | 30 Jan, 2021
Совместно со этим имеются деятельность, в каком месте очищение также гранулярность никак не обладают хитрого значимости. Но означает, применение дорогостоящих использованных материалов никак не необходимо. Еще единственный значимый период – производитель. Правильнее приобрести песочек около фирмы со оптимальной славой, обезопасив себе с низкокачественных также небезопасных строительных материалов. Меря ко собственному жилью либо жилплощади разнообразные виды дизайна внутреннего убранства, никак не торопитесь воздерживаться с такого рода ставшей овражный песок довольно распространенной во заключительное период системы, равно как платформа. Данное, крайне важное в настоящий период интерьерное разрешение прибыло ко нам с государства всходящего небесного светила, в каком месте со древних времен существовало установлено приподнимать степень фалда.
38.Charlesjak | 30 Jan, 2021
Обширный также обособленный масса имеют все шансы различаться, по этой причине присутствие постройке следует принимать во внимание все без исключения грех. Во обычном обширный масса песка во 1 кубик. м является 1500-1800 килограмм. Согласно эталонам стандарт 8736-77 во 1 кубик. м находится 1,6 полиадельфит. Структура также физико-машинные качества семена строй песка около купить овражный песок микроскопом Структура песка, специализированного с целью постройки, разделяется в: Механический (зерновой); Хим; Минераловый. Механический (зерновой) демонстрирует структура семян со различной размером. С Целью его установления следует отсеивать песочек посредством ситечко со отверстиями конкретного объема (с 0,16 миллиметров вплоть до Десяти миллиметров).