Проблема со списками в IE
Настоящие верстальщики должны слегка поморщиться вспомнив об этом баге.
Проблема с которой сталкивался, наверное, каждый. Самая банальная ситуация, вертикальное меню, и в дизайне есть хавер-эффект для пунктов меню (или другая причина сделать их блочными).
html:
- <ul>
- <li><a href="#"></a></li>
- </ul>
css:
- li a{
- display:block;
- }
И вуаля, вот что имеем в ИЕ6, например:
Отступы между элементами списка в 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. Любой из этих параметров является триггером этого свойства для блока.
Под MSIE8 не надо хакать, надо сразу репортить в виде минимального тест-кейса. Время на исправление ещё есть.
Абсолютно верно, спасибо, это моя политическая ошибка. Подготовил тесткейс, отсабмичу. Немного поправил пост.
Оставил хак из чисто исторических соображений. Вдруг кого-то это позабавит в 2125 году.
Есть ещё обалденный трюк:
LI { display:inline-block; }
LI { display:block; }
Причём пишется именно так, в разных группах правил. Иногда помогает ) Стащил у Роджера нашего Йохансена.
Добавил на тестовую страничку и этот вариант=) Номер 8. Спасибо!
Сам по себе код не сработал (остались маленькие отступы), но добавив vertical-align:top - все стало как надо :).
Кстати, Бруно высказал мысль что когда li{имеет haslayout}, то ведут они себя как inline-block, которым как раз не хватает вертикального выравнивания. Вот и получается подтверждение теории =)
очень интерестно!
хотя с такими проблемами несталкивался, хотя читал по них… ну как то на простых списках не встречались, а на сложных оно само-собой 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-ке отобразились правильно
Это могло быть из-за того, что твоя шестерка уже юзает движок 7рки, или даже 8ки. Если ты ее поставил =). Хотя все равно странно, у меня Windows XP Pro, IE6 стандартный (не Standalone). А у тебя какой комплект?
PS: про ие5* я стараюсь как-то начинать забывать =) Хотя, понимаю, не все могут это себе позволить.
на работе (где и идёт основная работа): базовый 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.
Маячня! Не працює в Віслючку під Мак ОС Х. Не перевіряв, але певен!
a{display:block}
to lechica ystanovkoi shirini dlya ( a{width:100px} )
Указание ширины как раз и является триггером hasLayout. Но не всегда достаточно указания ширины, хотя это и убирает “большие” отступы. Маленькие все еще могут иметь место, при маленьком line-height, или заданной ширине, для, например LI.
С IE вечно какие-то проблемы бывают.
Мне кажется, что про IE давно уже пора забыть как про браузер - у него постоянно что-то не так. (
Выход нового IE еще больше доставит проблем верстальщикам… Спасибо за совет, в коментах приведен еще одни интересный вариант, pepelsbey, вам тоже спасибо.
сегодня закончил один красивый макет, и для IE5.0 действительно помог vertical-align:top ! - были маленькие отспуты, а с нми - пропали и стало как надо)
спасибо!
кстати с различной работой IE6 в оригинале и в standalone несталкивался
зато однозначно могу сказать что standalone IE5 и 5.5 при дефолтном IE7 подглючивают изображение (оно бывает отрисовывается не всё, а только если подвигаешь края браузера.
при дефолтной 6-ке всё ок.
Часто помогает пофиксить большинство самый неожиданных глюков для IE6,5.5.5 установка свойств height:1% или/и position:relative для самих элементов, или родителей (требуется каждый раз небольшой эксперимент).
А, ещё. Для полноценного тестирования standalone не подходят - лично часто натыкался на несоответствие реального IE6 и standalone. Причина в “подхватывании” системных dll от нового IE.
Выход: ставим VMWare, ставим на неё операционку (Win98/2000), клонируем, на каждый клон ставим нужный IE. Имею в результате: IE5, IE5.5, IE6, IE7, Opera, Safari, FireFox. 99% броузеров тестом покрываю.
Абсолютно верно. Подходит указание heigth, width, zoom, position:relative — все эти свойства являются триггерами упомянутого в посте hasLayout.
Спасибо за пост, даже не догадывалась, что возможно столько способов решения этой проблемы!
Большие отступы можно лечить если оставить пробел перед закрытием тега /А, удобней чем писать все в одну строку ))
Да, этот вариант на тестовой страничке под номером 3. Но мне не нравится идея вносить правки в ХТМЛ, к тому же за этим вряд ли потом уследят на рабочем проекте, по опыту.
Спасибо за советы. Первое впечатление от 8 IE были не приятные особенно из-за этой проблемы.
Привет всем, случайно забрел…
Может я туплю… Но LI это по умолчанию display:block; поэтому для IE это не bug
А вот просто так…
li a{ margin:0;padding:0; }, ну или подробно с отступами , если душа лежит или есть нужда. И все… и где проблема?
Тут нигде и не упоминается задание для li{display:block}, только для “li a”.
И обнуление margin и padding не поможет, вы все равно увидите отступы в ИЕ. Вы можете это легко проверить прямо сейчас, для удобства я показал как это выглядит в ИЕ, на первой картинке в посте.
хм, а теперь отображаются глюки в ИЕ)
однако))
хотя ничего ж неменял))
к статье часто возвращаюсь) спасибо!
Использую обычно для этого это cпособ hasLayout! Помогает! Но возникает другая проблема, когда например в спискe (ul) присвоено значение флоат и не указана ширина то список и активная область в каждой ссылке ужимается до самого размера каждой ссылки(обычно слова-ссылки разной длины) в нормальных браузерах! Тоесть активная область ссылки равняется длине слова! Это в нормальных браузерах!
При включении haslayaut в ie активная область ссылки на всю ширину браузера! Получается надо указать для списка ul ширину, но это не выход так как слова в списках разной длины и будет получаться так что у коротrих ссылок активная область будет гораздо больше по ширине чем само слово! Что бы это исправить надо еще мутные замуты!
p.s. Понятней и короче объяснить не смог