ul li баг в IE
January 23rd, 2008 by Yuriy DrozdovСтатью решил назвать "ul li баг в IE", хотя под это описание могут попасть много багов. Речь сегодня пойдет лишь об одном из них. А именно о непонятных отступах между элементами li. Рассмотрим следующий CSS и HTML код, который представляет из себя простое меню.
CSS:
-
#menu {
-
list-style: none;
-
padding:0;
-
margin:0;
-
font-family: Georgia;
-
}
-
#menu li {
-
width:100px;
-
border-bottom: solid 1px #ccc;
-
height:18px;
-
}
-
#menu a {
-
padding-left:5px;
-
display:block;
-
text-decoration: none;
-
font-size:14px;
-
line-height:18px;
-
color:#848388;
-
background-color:#e6e6e6;
-
}
-
#menu a:hover {
-
padding-left:10px;
-
color:#000;
-
}
HTML код выглядит так:
HTML:
В действии:
Теперь посмотрим данный код в браузере Firefox. Увидим:
В тоже время в браузере Internet Explorer 6.0 (в простонародье просто, IE) картина будет немного отличаться от увиденного нами в Firefox и, собственно, от ожидаемой.
Как это исправить? Оказывается, очень просто. Достаточно для li указать CSS свойство vertical-align: bottom. Изменим CSS код:
CSS:
-
#menu {
-
list-style: none;
-
padding:0;
-
margin:0;
-
font-family: Georgia;
-
}
-
#menu li {
-
width:100px;
-
border-bottom: solid 1px #ccc;
-
height:18px;
-
vertical-align:bottom;
-
}
-
#menu a {
-
padding-left:5px;
-
display:block;
-
text-decoration: none;
-
font-size:14px;
-
line-height:18px;
-
color:#848388;
-
background-color:#e6e6e6;
-
}
-
#menu a:hover {
-
padding-left:10px;
-
color:#000;
-
}
Теперь меню будет выглядеть и в Firefox и в IE одинаково.
Похожие статьи:
- Нет похожих статей
Отлично! Наконец-то нашлось достойное решение этого бага, а не то раньше приходилось использовать zoom:1 или задавать высоту. Спасибо! Будем использовать
Очень приятно получать похвалы от такого замечательного человека!
Ну прямо засмущали
. Интересно, в чем это я такой замечательный?
Замечателен в ведении своего блога
Вот как
. Спасибо! Тоже очень приятно 
А чем плох zoom: 1; вынесенный в отдельный файл для включения hasLayout у IE?
Для меня интуитивно понятней все-таки vertical-align
Спасибо, давно искал решение этой проблемы.
Рад, что пригодилось!
Хорошее, эфективное решение. Спасибо.
Я раньше использовал такой способ:
#menu li {
.....................
clear: left;
float: left;
}
Баг исправляется, но тогда следующему за ul элементу следует добавить «clear: left;»
:)
Да, я тоже как-то таким способом боролся
Yuriy Drozdov
скажите пожалуйста, а с вордпрессом это будет работать? А то недавно с ужасом заметил, что некоторые мои блоги в IE ужасно криво изображаются…
не вижу причин, по которым бы css не работал в вордпрессе.
[...] Как избавиться от отступов между элементами списка Прочитал что-то новое и полезное? Тогда подпишись [...]
IE это сплошной баг а не браузер
попробуйте убрать переносы строк между элементами списка, и вы приятно удивитесь
вот так:
Menu item #1 Menu item #2Menu item #3
Попробовал убрать переносы
Отступ в IE 6 стал меньше, но он все равно есть 
Поэтому - это не выход.
Вот более рациональное решение данной проблемы, парни, ибо баг давно известен))))
li {
display: inline;
}
Блин, да это и не баг вовсе…это недостаток css 2…как говориться ничего идеального не бывает! =)
Спасибо, за комментарий. Но display:inline, тут не подойдет, мне не нужно, чтобы элементы меню были в линию. Все-таки это баг IE 6, т.к. в остальных браузерах меню отображается корректно.
Спасибо, пригодилось
У меня был способ:
ul li a{margin-top: -2px;}
В таком случае прийдется использовать условные комментарии для IE, чтобы это не отразилось на остальных браузерах
Я тоже использовал этот способ
Я пишу списки в одну строку и никогда никаких переносов небыло.
А если список довольно большой?