Проблемы в IE7 с тегами li, вложенными в тег nav

Question

Кажется очень модным в эти дни нам <li> теги для целей навигации, не вложенные в них <ul> или <ol>. Но у меня были проблемы с обработкой в ​​IE7 и ниже (нет ничего удивительного) при вложенности тега <li> непосредственно в тег HTML5 <nav>.

Следующий пример делает некоторые забавные вещи:

<nav class="nav1"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</nav> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
<nav class="nav2"> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
</nav> 

Demo of code above включая CSS

Использование IETester и средства отладки, если анализировать DOM вы увидите, что она выглядит как IE дублирует некоторые <li> теги и пытается собрать их вместе, хотя они разделены тегом <p>.

Это дает странные результаты (визуально), когда у вас есть несколько <nav><li> комбо по всей странице.

Испытывал ли кто-нибудь еще это и может ли он предоставить решение для его устранения? Должен ли я включить тег <ul> и рискнуть нечестным? :)

Answer 1

Даже по правилам HTML5, li element допускается только в качестве потомка ul, ol или menu. Все ставки прекращаются, если вы нарушаете это, и это бессмысленно. Поэтому просто прекратите делать это и оберните li элементами внутри ul (которые вы можете обернуть внутри nav, если хотите, но нет ощутимого выигрыша от этого).