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 中，但没有任何实际的好处）。