html5 semantic elements and old browsers

问题

I am about to design a new layout for a webpage and wanted to take advantage of this moment to implement some html5 markup.

The first thing that comes in my mind are the semantic elements (nav, header, article..)

After checking http://caniuse.com/#feat=html5semantic I noticed that IE8 (and below) don't support the elements. This probably means that I cannot style the semantic elements expecting a coherent result.

The website receives quite a lot of traffic from IE7/8 browsers and I don't know how to proceed. I heard about modernizr and html5shiv but I don't know what's the best standard nowadays..

回答1:

Because you're only looking for a method to style HTML5 elements, use HTML5Shiv (which is specifically designed for this purpose). Modernizr contains many more features. which you're not going to use (judging by the question).

Here's the source code, in case you're wondering: https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js

回答2:

You can style them. You just have to run either the HTML5shiv or Modernizr. You'd also want to add some CSS to make them block by default.

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

回答3:

There is no way to make old versions of IE to recognize the new elements except via client-side scripting. If you decide that non-JavaScript use is ignorable, you can use some of the tools mentioned in other answers, or you can do yourself—the technique is odd, but not rocket science at all, e.g.

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

A more robust solution is to use div markup with class (or id) attribute, in addition to using the new elements, e.g.

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

and to set your styles using class (or id) selectors like .nav. This would be robust, and it would also give you the benefits of using purportedly semantic markup like nav. (No tangible benefits have ever been presented, but maybe some will emerge.)