html - IE8 无法正确呈现 HTML

Question

我在 IE8 中遇到了一些以前从未见过的问题。本质上，问题在于导航菜单在以下标记内具有样式:

      <section class="top-bar-section">

        <ul class="left">

          <li>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
          </li>

        </ul>

      </section>

    </nav>

但是在 IE8 中，我正在查看 dom 树并且 HTML 没有像上面那样呈现。下面是一张比较 IE8 和 Chrome 中的 dom 树的图片。

您可以看到 nav、section 和 UL 元素正在关闭，而不是彼此的父元素和子元素。这导致 CSS 规则出现问题，因为它们需要 child 和 parent 才能应用 css 规则。

Answer 1

<section> IE8 不支持标签。

它是新的 HTML5 标签之一，在 IE8 发布时尚未发明。因此 IE8 对此一无所知。

IE8 默认不渲染未知元素。

为了让IE8理解<section>标签和其他新的 HTML5 标签，您需要使用 html5shiv填充脚本。此脚本帮助 IE8 将这些标记识别为有效的 HTML，从而正确呈现它们。

您还可以使用 Modernizr ，它具有帮助处理旧浏览器的附加功能，并且还包括 HTML5shiv 功能。

当然，另一种选择就是不使用新的 HTML5 标签；只需使用 <div>相反，IE8 将在没有任何 javascript hack 的情况下正常工作。