Question

获取HTML <header>，<section>和<footer>等HTML5标记元素以便在IE中正常显示的最佳方法是什么？

通常，当我将CSS应用于HTML5元素时，样式不会发生。但我已经在其他网站上看到了它，例如colourfreak.com，并希望得到一些帮助。

我认为这与不接受新标签名称的选择器有关。所以这样的事情是行不通的：

nav a {
    text-decoration: none;
}

详细解释或好文章会有所帮助。谢谢！

Answer 1

对于IE，我们必须使用JS创建新的HTML5元素。创建新文件，将其命名为html5.js，并在<head>区域中包含此脚本。一切都会好的。

document.createElement('article');
document.createElement('aside');
document.createElement('details');
document.createElement('figcaption');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('main');
document.createElement('menu');
document.createElement('nav');
document.createElement('section');
document.createElement('summary');

这仅适用于IE，因此您可以使用条件注释：

<!--[if IE]><script src="js/html5.js"></script><![endif]-->

由于这些元素显示为内联元素，您可能希望在CSS文件中添加此规则：

article, aside, details, figcaption, figure, footer,
header, hgroup, main, menu, nav, section, summary { display: block; }

Answer 2

您可以使用HTML5 Shiv ...

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

您也可以使用HTML5样板...（包括HTML 5 shiv）

http://html5boilerplate.com/

Answer 3

我很确定Modernizer也可以解决您的问题以及CSS3的其他跨浏览器问题。

如何让HTML5标记元素在IE中很好地显示

3 个答案: