IE7 не соответствует отображению: блок на <ul><li> <a>

Question

Я пытаюсь выполнить простую вертикальную навигацию, используя следующую разметку HTML:

<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

Несмотря на наличие display: block; на элементах <li> и <a>, IE7, похоже, не соответствует всемширина вмещающего дел.Есть идеи на этот счет?

http://jsfiddle.net/6eKGL/

ОБНОВЛЕНИЕ

Теперь я считаю, что проблема связанасвойство position контейнера div и тот факт, что его ширина определяется содержимым элементов <a>.

Answer 1

Вот обновленная скрипка с IE-7, проблема решена.http://jsfiddle.net/6eKGL/35/

Демонстрация: http://jsfiddle.net/6eKGL/35/embedded/result

CSS:

#ajax-search ul li a {
    display: block;
    /*min-width: 150px;*/ // Remove this rule and the IE-7 will start respecting the display block
    padding: 9px 18px;
}

См. Скриншот ниже IE-7

Answer 2

Установка overflow: hidden на элементе <li> поможет мне!

Answer 3

Набор overflow:hidden для ul и немного широкой ширины для a http://jsfiddle.net/sergeir82/N2thx/

Answer 4

Попробуйте после удаления "min-width" из "# ajax-search ul li a {display: block; отступ: 9px 18px; min-width: 150px;}"

Answer 5

попробуйте добавить doctype в ваш html, желательно html5 или xhtml 1.0 строгий. Таким образом, IE7 рендерится в стандартном режиме и не использует свою собственную блочную модель.

также используйте сброс css. Google для "сброса Эрика Мейера".

ссылки:

http://www.quirksmode.org/css/quirksmode.html

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

http://en.wikipedia.org/wiki/Quirks_mode

UPDATE:

см. Эту скрипку: http://jsfiddle.net/6eKGL/23/