在 IE 8 及更低版本中，标题消失并且列表没有样式

Question

我注意到在 IE 8 及更低版本中，我的标题消失了，我的列表变得没有样式。

意思是，它们看起来与应有的不同，并且有子弹。

为什么会发生这种情况，我该如何解决。

我知道我还没有包含 html5 shim / html5 shiv，这会导致标题消失吗？我的<main> 元素和列表样式呢？

这是发生这种情况的页面的链接：https://dl.dropboxusercontent.com/u/270523/help/search/new.html

这是它在 IE8 中的样子：http://pageaffairs.com/sp/so-16270338.png

Answer 1

正如this question's accepted answer 中所指出的，IE8 不能很好地处理 HTML5 元素。它不仅没有设计这些元素的样式，而且有时（如您所见）使它们似乎完全消失了。我在我的团队开发的网站上亲眼目睹了这一点。 IE8 将我们使用的所有<section> 标签转换为<section />，这只是弄乱了我们所有的内容和样式。您将需要使用HTML5 shiv script 使其工作（Modernizr 为我们修复了它，HTML5 shiv 脚本只是其中的一部分，但您可能至少只需要 shiv 脚本)。

Answer 2

较旧的 IE 不会呈现 HTML5 标记，因此应用到它们的样式将被忽略。 （它们甚至不会渲染为像“哦，好吧，让我们假装它是一个 div”这样的块。不，它完全被忽略了）。

是的，正如您所说，最好将html5shiv 添加到代码的标题中，如下所示：

<!--[if lt IE 9]>
<script src="path/to/your/shiv.js"></script>
<![endif]-->

这意味着if lower than IE 9，应用这个脚本。

此外，CSS3 的东西也会发生同样的情况，比如border-radius 和其他东西。为此，请使用CSS3Pie，这很方便。

.someRoundCorner {
    border-radius:4px;
    behavior:url(path/to/css3pie/htc);
}

作为建议，如果您的主要受众使用 IE id 的 div 等于您实际想要的 HTML5 标记。比使用 .js 更好（如果 .js 被禁用，布局会像现在一样中断）。当旧的 IE 不再受支持时，将更容易搜索和替换 id 等于您想要的标签的文档。

更新： 您的 css 是 main ul, [role="main"] ul, #main ul，但由于 IE 不知道标签 main 是什么，它会将 UL 抛出，因此您的 CSS 选择器不匹配。在这张图片中看到所有他不知道的元素，他都变成了一个空元素：

左边是它实际渲染的代码，而右边是真正的源代码。如您所见，UL 已超出main。