html5语义元素和旧浏览器

Question

我即将为网页设计一个新的布局，并希望利用这一时刻来实现一些html5标记。

我想到的第一件事是语义元素（nav，header，article ..）

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

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

Answer 1

你可以设计它们的样式。您只需运行HTML5shiv或Modernizr即可。您还希望添加一些CSS以使其默认阻止。

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

Answer 2

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

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

更强大的解决方案是使用div标记与class（或id）属性，以及使用新元素，例如

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

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

Answer 3

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

以下是源代码，如果您想知道：https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js

Answer 4

你可以（而且应该？）使用它们。确保它们在旧浏览器中显示良好，我建议使用html5shiv。

http://code.google.com/p/html5shiv/

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