IE7中的问题，li标签嵌套在nav标签中

Question

这些天来我们<li>标签用于导航目的似乎非常时髦，而没有将它们嵌套在<ul>或<ol>中。但是，当我将<li>标记直接嵌套在HTML5 <nav>标记内时，我在IE7及以下版本中一直存在渲染问题（毫不奇怪）。

以下示例做了一些有趣的事情：

<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内，但是没有明显的收益）。