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

Answer 1

IE8不支持<section>标记。

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

IE8默认不渲染未知元素。

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

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

当然，另一种选择就是不使用新的HTML5标签;只需使用<div>，IE8就可以正常工作而不需要任何javascript黑客攻击。

Answer 2

IE 8需要HTML5Shiv脚本才能使用HTML5标签。 主要的解决方法是在文档头部创建HTML5 section元素：

document.createElement("section")

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

  

诀窍是调用document.createElement（“section”）会   突然导致IE识别section元素。没有人知道为什么，   但它工作，你甚至不需要使用由它返回的节点   功能

从this文章，它解释了为什么IE8需要这个脚本。

Answer 3

这是因为您使用的是HTML5标记section，当然IE8不支持HTML5标记，因为您可以在CanIUse中看到

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

您需要“启用”HTML5 iN IE8的内容HTML5 Shiving或Modernizr

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

Modernizr 是一个小型JavaScript库，可检测下一代Web技术的本机实现的可用性，即源自HTML5和CSS3规范的功能