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

Question

让

、

和

等 HTML5 标记元素良好显示的最佳方法是什么在IE中？

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

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

nav a {
    text-decoration: none;
}

详细的解释或一篇不错的文章会很有帮助。谢谢！

Answer 1

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

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 的许多其他跨浏览器问题。