Nausea compatibility issue: the perfect solution IE (IE6 / IE7 / IE8) is not compatible with HTML5 tag issues

The HTML5 semantic tags and attributes, allowing developers to easily implement a clear web page layout, plus the effect of CSS3 rendering, to quickly build a rich and flexible web page is very simple.

<header>定义页面或区段的头部；
<footer>定义页面或区段的尾部；
<nav>定义页面或区段的导航区域；
<section>页面的逻辑区域或内容组合；
<article>定义正文或一篇完整的内容；
<aside>定义补充或相关内容；

They make use of semantic code is more intuitive and more convenient SEO optimization. However, this does not recognize the new label HTML5 on IE6 / IE7 / IE8, JavaScript processing is required. The following are just some ways.

Method 1: Coding JavaScript

<!--[if lt IE 9]> 
<script> 
   (function() {
     if (! 
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     } 
})() 
</script>
<![endif]-->

If it is less than IE9 IE browser will create HTML5 tags, such non-IE browsers will ignore the code, there would be no unnecessary http requests.

The second method: using Google's html5shiv pack (recommended)

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!--
这个内容是我附加的：
<script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
主要是担心，如果这两个cdn失效了，可以相互替换试试
-->
<![endif]-->

But regardless of which method above, CSS must initialize the new label because HTML5 performance by default as inline elements, these elements with CSS layout we need to manually put them into convenient layout block elements

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

But if ie6 / 7/8 disable a user script, then it becomes a free-style "whiteboard" page, how can we solve it?
We can refer facebook practices that guide the user to enter noscript identified with "/? _fb_noscript = 1 "page, replace the label with html5 html4 label, which in order to maintain compatibility than write a lot hack the practice of some lighter.

<!--[if lte IE 8]> 
<noscript>
     <style>.html5-wrappers{display:none!important;}</style>
     <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
     </div>
</noscript>
<![endif]-->

This can guide the user opens a script, or jump directly to HTML4 label design interface.
Article from: HTTP: //www.cnblogs.com/Capric ...

Guess you like