HTML5 Shiv-solution to HTML5 tags incompatible with IE (IE6/IE7/IE8), ie8html5

HTML5 Shiv-solution to HTML5 tags incompatible with IE (IE6/IE7/IE8), ie8html5

The Semantic tags and attributes of HTML5 allow developers to easily achieve a clear web page layout. Most browsers are basically compatible with html5, but ie6, ie7, and ie8 are currently not compatible with html5 tags, so javascript processing is required for compatibility.

Method 1: javascript code

<!--[if lt IE9]> <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]-->

For ie browsers under IE9, HTML5 tags will be created, so that non-ie browsers will ignore this code and there will be no unnecessary http requests.

Method 2: Use Google's html5shiv package

<!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

(Ps: FQ is required to open the webpage of this link. Even if I use FQ, No dialers left to try on pass 0 is displayed on the webpage)

Because google's server access card in China is used, it is recommended to call cdn in China.

<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

This link is available for test.

The js part has been written, but there is still a small problem. If you encounter a user who disables scripts in ie6/7/8, it will become a "whiteboard" webpage without style. How can we solve this problem?

We can refer to facebook's practice to guide users into the "/? _ Fb_noscript = 1 "page, use html4 tags to replace html5 tags, Which is lighter than writing a large number of hack to maintain compatibility.

<! -- [If lte IE 8]> <noscript> <style>. html5-wrappers {display: none! Important ;}</style> <div class = "ie-noscript-warning"> scripts are disabled in your browser, please <a href = ""> check here </a> to enable the script! Or <a href = "/? Noscript = 1 "> continue access </a>. </div> </noscript> <! [Endif] -->

In this way, the user can be guided to open the script or directly jump to the HTML 4 tag design interface.

 

 

 

 

 

The js part solves the problem and goes to the css part. Css needs to initialize these new elements to facilitate layout settings.

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

　　

Note: it is a coincidence that a good memory is not as good as a bad word, so we can summarize some practical problems we will encounter during development. If we encounter any other problems, we can refer to them as below.