html5语义元素和旧浏览器答案

【问题标题】：html5 semantic elements and old browsershtml5语义元素和旧浏览器
【发布时间】：2012-07-26 10:10:37
【问题描述】：

我即将为一个网页设计一个新的布局，并想利用这个机会来实现一些 html5 标记。

我首先想到的是语义元素（导航、标题、文章..）

检查http://caniuse.com/#feat=html5semantic 后，我注意到 IE8（及以下）不支持这些元素。这可能意味着我无法对期望连贯结果的语义元素进行样式设置。

该网站从 IE7/8 浏览器收到大量流量，我不知道如何继续。我听说过 modernizr 和 html5shiv，但我不知道现在最好的标准是什么..

【问题讨论】：

【解决方案1】：

您可以设置它们的样式。您只需运行HTML5shiv 或Modernizr。您还需要添加一些 CSS 以使其默认被阻止。

article, header, nav, section, footer
{
    display: block;
}

【讨论】：

使用 HTML5Shiv 或 Modernizr 时无需手动添加默认样式，因为它们已经添加（参见 source code of HTML5Shiv，Modernizr includes HTML5Shiv）。
@RobW 够公平的。反正我已经习惯了，我不再考虑它了（它在我的 reset.css 文件中）。不过，很好的收获。 :)

【解决方案2】：

没有办法让旧版本的 IE 识别新元素，除非通过客户端脚本。如果您认为可以忽略非 JavaScript 的使用，您可以使用其他答案中提到的一些工具，或者您可以自己动手——该技术很奇怪，但根本不是火箭科学，例如

 <script>
 document.createElement('nav');
 document.createElement('header');
 document.createElement('article');
 </script>

除了使用新元素之外，更强大的解决方案是使用带有class（或id）属性的div 标记，例如

 <nav><div="nav">...</div></nav>

并使用 .nav 之类的类（或 id）选择器设置您的样式。这将是健壮的，并且它还将为您提供使用据称语义标记（如nav）的好处。（从未出现过任何切实的好处，但也许会出现一些好处。）

【讨论】：

【解决方案3】：

因为您只是在寻找一种方法来设置 HTML5 元素的样式，所以请使用 HTML5Shiv（专为此目的而设计）。 Modernizr 包含更多功能。你不会使用的（从问题来看）。

【讨论】：

【解决方案4】：

您可以（而且应该？）使用它们。一定要让它们在旧浏览器中显示得很好，我推荐 html5shiv。

我们在这里使用它：Midlands Health Network

【讨论】：