Do not use JavaScript to let IE browser support HTML5 elements--Zhang Xin Xu

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=2515

If we do not do anything, Ie6~ie8 browser does not support HTML5 elements, <nav>,

However, the previous Google front-end specification in the HTML section mentions: to make the semantic HTML5 elements as text/html, considering that Google can not be IE8 and other browsers abandon, therefore, there must be a way to let Ie6~8 browser also support HTML5 elements.

Well-known JavaScript methods

If you focus more on HTML5 elements than on red tomato gossip, you should all know how to have a simple JavaScript code that allows the Ie6~8 browser to support HTML5 elements, similar to the following code:

(function () {    //page head    var a = [' section ', ' article ', ' nav ', ' header ', ' footer '/* other HTML5 element */];    for (var i = 0, j = a.length; I < J; i++) {        document.createelement (a[i]);}    }) ();

You can mercilessly click here: JS let ie support HTML5 element demo

Comparing the source code of the demo page and the actual effect, we can find a simple sentence:

Document.createelement ("section");

Let section{} the relevant style in the IE7 browser under the effective!!

Referring to the use of JavaScript, there must be some people with usability to shout: "If the user put JavaScript to ban, it does not belch fart!" ”

It is said that because of Twitter in the case of JS is disabled like in the sunflower finger-pressing hand-can't move! And some enthusiastic people to comment: should improve the AH, can be used in the case of JS disabled normal use.

The ideal is plump, the realization is the Thorn! Discuss whether to support the normal use of no JavaScript in the actual project, will let Mr. Liu said: "I live for 42 years, this is the most boring problem I have seen!" ”

However, it's like we don't practice artificial respiration personally, but it's necessary to know what to do. Therefore, we know how to make it necessary for IE to support HTML5 elements without using JavaScript.

* Wildcard method

It is said to be a method suggested by the WHATWG group, as follows:

1. Knowing the weight of the DOM and the measurements, the style is applied on other elements (not HTML elements)
2. Using the global selector, the wildcard character ( * ) points to the correct target element
3. No scripting App

However, according to my own attempts, this method makes me feel somewhat puzzled: if the style is to be applied to other elements in the internal, and the inside of the element of the name of a person to set the class names control soon OK!!

It is possible that this approach applies to similar to:

Section P {}

This is a descendant selector that contains HTML tags. The above CSS selector ie6~8 is not known, WHATWG said the method is to use:

Body > * p {}

To IE7, IE8 browser to match (IE6 not support, I wipe ~ ~, but this Firefox, Chrome is also supported)

In short, this is a I do not understand, and feel very painful discomfort should be China's national conditions of the method, to seek expert guidance!

You are interested to click here: * Wildcard Foujian IE support HTML5 elements demo

In order to avoid complex multi-angle love between browsers, I had to use conditional annotations:

<!--[If LT IE 9]><style>body > *. section {    display:block;    padding:. 5em;    border-left:3px solid #ddd;    Color: #999;} </style><! [endif]--><style>section. section {    display:block;    padding:. 5em;    border-left:3px solid #ddd;    Color: #999;} </style>

The HTML is as follows:

<section><div class= "section" > China will ...</div></section> to Africa

IE6 under no effect, IE7 looks as follows:

IE Conditional comment

It is also very painful, and a person feel basic no practical value of the method:

<!--[if LT IE 9]><div class= "section" ><! [endif]--><!--[If IE 9]><section class= "section" ><! [endif]--><!--[if! ie]><!--><section class= "section" ><!--<! [endif]-->    ......<!--[if Lt IE 9]></div><![ endif]--><!--[If IE 9]></section><! [endif]--><!--[if! ie]><!--></section><!--<! [endif]-->

This discerning eye a glance at the meaning: ie6~8 use the traditional <div> label, you are interested in the effect, you can click here: Conditional comments Let ie support HTML5 element demo

How-To: Use namespaces

We need to do the following:

1. Modify the namespace at the label
2. Using similar tags
3. Use the following selector name for control:html5\:section {}

Here's how:

 <body>
  </body>
Then use:
html5\:section {/ * style */}
You can really click here: namespaces let IE support HTML5 elements demo
The demo HTML code is:
<div class= "section" > All browsers: Jack Huang, green loyalty, black loyalty, red </div><section> not including Ie6-8: Jack Huang, green loyalty, black loyalty, red medium </section>< Html5:section> includes Ie6-8 browser: Jack Huang, green loyalty, black loyalty, Red Chinese 
The CSS code is:
. section, section, Html5\:section {
Display:block;
padding:. 5em;
BORDER-LEFT:3PX solid #ddd;
Color: #999;
}
At this point, we look at the effect under the IE7 browser:
This method, IE6 browser is also supported. It looks quite refreshing to use. At least two more than the above methods to be more reliable n times!
When using the note XHTML requires no errors, or the site may not show anything. At the same time, the head may have to be added, it is <?xml version="1.0" encoding="utf-8"?> said, otherwise IE6 will adopt strict mode.
Reference article: HTML5 elements in Internet Explorer without Javascript
Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=2515
(End of this article)
Do not use JavaScript to let IE browser support HTML5 elements--Zhang Xin Xu