在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

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

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

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

这意味着if l ower t han IE 9，请应用此脚本。

此外，CSS3的内容也是如此，例如border-radius和stuff。为此，请使用CSS3Pie，这很方便。

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

作为建议，暂时仍然使用id等于您实际想要的HTML5标记的div，如果主要受众使用IE＆lt; 9.比使用.js更好（如果.js被禁用，布局将像现在一样破坏）。当旧的IE不再受支持的时候，将更容易搜索和替换id等于你想要的标签的文件。

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

左边是它实际呈现的代码，而右边是真正的源。如您所见，UL不在main。

Answer 2

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