то есть 7 не работает с встроенным блоком CSS или исправлениями

Question

Я знаю, что об этом спрашивали миллион раз, но ничто из того, что я пробовал, не решило проблему.Я работаю над красивой вещью типа <select>.Я основываю его на общих CSS-выпадающих меню навигации (используя вложенные <ul> s и <li> s, всего лишь с несколькими настройками. Одна из настроек заключается в том, что мне нужно, чтобы он отображался inline (без плавающего, потому чтоидет мимо любых других элементов в той же строке, что и он, и я не хочу плавать все остальное вокруг него. У меня это хорошо работает в браузерах, кроме 7 (и, вероятно, что-нибудь ниже, но я ненужно что-нибудь ниже чем ie7). Вот код: http://jsfiddle.net/ralokz/hjDVS/2/

Если вы посмотрите на это в любом браузере, отличном от ie7, это выглядит так, как я хочу:

Но если вы посмотрите на него в ie7, он будет выглядеть так:

Один сайт, который я видел, подходит для встроенного блокаисправить это так: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/. Это сработало для ie8, но, к сожалению, ie7 все еще выглядит неправильно.

Есть ли другой способ исправить inline-block для ie7? Или есть CSSальтернатива, чтобы убедиться, что второй уровень <li> s всегда вертикально выровнен с первымEvel <li>?Спасибо!

Answer 1

Добавьте: position:relative; к div.dropdown ul li, избавьтесь от полей на div.dropdown ul li ul и установите его top:25px, left:-1px;, width:100%;наконец, установите div.dropdown ul li ul li в margin:0;, удалите левый-правый отступ и установите width:100% ...

Я мог что-то пропустить, но вот рабочий пример: http://jsfiddle.net/hjDVS/7/

Я думаю, что ваша настоящая проблема была в абсолютно позиционированном ul

Answer 2

IE6 и IE7 поддерживают inline-block, но у них есть серьезная ошибка: они поддерживают его только для элементов со стилем отображения по умолчанию inline.

Следовательно, span {display:inline-block;} будет работать, а div {display:inline-block;} - нет.

Если это проблема для вас, есть хорошие новости: у них есть еще одна ошибка, которая заставляет inline работать так, как в некоторых случаях inline-block, поэтому вы можете просто использовать display:inline;.

Если вы собираетесь это сделать, вам нужно быть осторожным, чтобы убедиться, что только IE6 и IE7 делают это, поскольку другим браузерам потребуется правильный стиль inline-block;. Для этого могут потребоваться некоторые специфичные для браузера хаки или условные комментарии.

Answer 3

Для каждого правила с display:inline-block в таблице стилей IE 7 укажите zoom:1; display:inline; Это работает со всеми элементами и работает примерно одинаково.