IE8 无法正确呈现 HTML答案

【问题标题】：IE8 not rendering HTML correctlyIE8 无法正确呈现 HTML
【发布时间】：2014-01-14 20:32:28
【问题描述】：

我在 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 规则出现问题，因为它们需要孩子和父母才能应用 css 规则。

【问题讨论】：

HTML5 元素在 ie8 - caniuse.com/#feat=html5semantic 中不受本机支持，但有 shivs/shim 修复可用。
相关：stackoverflow.com/questions/21086879/…
stackoverflow.com/questions/5449502/… 或 google.de/…

标签： html css internet-explorer internet-explorer-8

【解决方案1】：

IE8 不支持<section> 标签。

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

IE8 默认不渲染未知元素。

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

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

当然，另一种选择就是不使用新的 HTML5 标签；只需改用<div>，IE8 就可以正常工作，而无需任何 javascript hack。

【讨论】：

【解决方案2】：

这是因为您使用的是 HTML5 标签，就像 section 一样，当然 IE8 不支持 HTML5 标签，正如您在 CanIUse 中看到的那样

Internet Explorer 8 及更早版本，不支持<section> 标签。

您需要能够“启用”HTML5 iN IE8 为 HTML5 Shiving 或 Modernizr 的东西

HTML5Shiv 是一种 JavaScript 解决方法，可在 9 版之前的 Internet Explorer 版本中启用 HTML5 元素的样式

Modernizr 是一个小型 JavaScript 库，用于检测下一代网络技术的原生实现的可用性，即源自 HTML5 和 CSS3 规范的功能

【讨论】：

谢谢！我完全忽略了这部分。

【解决方案3】：

您需要 IE 8 的 HTML5Shiv 脚本才能使用 HTML5 标记。主要修复是在文档头部创建 HTML5 部分元素：

document.createElement("section")

这以某种方式让 CSS 引擎知道具有该名称的元素存在。

诀窍是调用 document.createElement("section") 将突然导致 IE 识别部分元素。没有人知道为什么，但它可以工作，你甚至不需要使用它返回的节点功能。

来自this的文章，它解释了为什么IE8-需要这个脚本。

【讨论】：