Нечетное поведение CSS в неупорядоченном списке IE7

Question

У меня есть выпадающий список, который я пытаюсь заставить работать в IE7.Среди других ошибок, которые меня побили, якоря при наведении, не выдвигающие фон на полную высоту отступа.Кажется, что он остается в пределах своей жизни и, в конечном счете, уль.Я пытался увеличить высоту как ul, так и li, но это не сработало.Работает корректно во всех других браузерах:

http://jsfiddle.net/gzLVR/2/

Что вы должны увидеть: тег привязки при наведении должен расширяться внизу на 50px (согласно css #menu > ul > li:hover > a { padding-bottom:50px; }.Это расширение выполнено, но фоновый цвет, кажется, не выдвигает поля якоря.

Что я делаю не так?

Answer 1

Я сам нашел решение.Якоря каждого li по умолчанию настроены на обтекание его содержимого (display: inline?), А установка отображения на inline-block несколько опасна, так как его поведение в IE7 несколько непредсказуемо.

Просто установив привязку для display: block, вы позволяете ему принимать размеры самого себя в IE7, поэтому вы избавляетесь от необходимости просто оборачивать его содержимое.Таким образом, это может повлиять на необходимый отступ при наведении курсора.

Теперь это будет работать в IE7: http://jsfiddle.net/gzLVR/5/

Answer 2

Вы пытались изменить якорь на

display:inline-block; 
zoom:1;

zoom требуется только для IE7, он вызывает ' hasLayout '

Answer 3

Я думаю, триггер hasLayout исправит это;Вы можете сделать это с помощью чего-то вроде этого:

#menu > ul > li > a { display: inline-block;}

Имейте в виду, что IE не поддерживает :last-child до IE8 , но вы можете использовать :first-child.

Я бы также предложил использовать псевдоэлемент для части, которую вы использовали <i></i>, чтобы у вас не было лишней разметки в вашем HTML.

Answer 4

IE7 не поддерживает :hover для элементов, отличных от <a> тегов.Поскольку у вас есть :hover на <li>, он не работает в IE7.

Вам потребуется добавить некоторый javascript, чтобы добавить класс .hover к <li> при наведении курсора, изатем настройте ваш CSS так, чтобы он также включался:

#menu > ul > li:hover > a,
#menu > ul > li.hover > a{ 
    padding-bottom:50px; 
}

[EDIT] Похоже, это верно только тогда, когда IE7 рендерит в режиме quirksmode.Если вы используете строгий тип документа, вы сможете использовать :hover на <li>