Several scenarios that are compatible with the HTML5 tag of the Ie6\7\8 browser

Source: Internet
Author: User

The time has come for HTML5 to go on its way. If you're still waiting for browser compatibility, it means you've been disconnected from the web a few blocks. Of course, this is thanks to the booming mobile client. If still tangled in, whether should master HTML5 and CSS3 technology, please mercilessly smoke own several mouth, then, hard study bar! Because the front of the spring has come, and more than one spring. If you do not believe, I can only say: "Believe it or not!"

Let's take a look at a standard HTML5 tag structure: (I'm just saying the label, the other is not involved)

<! DOCTYPE html>

The progress of the HTML5 tag is certainly more intuitive than its semantics. Of course, this is only HTML5 progress of one of the nine cattle Mao, it was suggested that: do not say that the progress of HTML5 is revolutionary, but the development of sex! I have no objection to this statement, but it is a revolutionary one. We don't want to digress here, we just say labels.
Of course, excited by such a wonderful semantic tag, not only still asked: IE support? Unfortunately, the answer is no. If you have been frightened by IE, you will have to endure its endless torment. (IE9 and IE10 are already compatible with support for HTML5 and css3.0)

But you have to be thankful that there are many geniuses in this age of your life. Someone has helped you to solve this problem! Although, can not be called perfect!

Let's take a look at a few ways to resolve compatible ie6\7\8 does not support HTML5 tags:

1. Javascript:document.createElenment ("...")

Part of the reason Ie6\7\8 is not supported is that they do not consider footer to be a valid HTML tag. So we're going to "make" it into a label, right? The most straightforward approach is, of course, the way JavaScript was created: Document.createelenment ("...")!

(function () {            var element=[' header ', ' Footer ', ' article ', ' aside ', ' section ', ' Nav ', ' menu ', ' hgroup ', ' details ', ' Dialog ', ' figure ', ' figcaption '],                len=element.length;            while (len--) {                document.createelement (Element[i])            }});

It's just simple to create a few typical HTML5 tags so that they can be labeled in ie6\7\8.
Someone has written a complete JS file, you just need to introduce both, like this:

There are also writing

<!--[If LTE IE 9]>    <script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script ><! [endif]-->

The difference between Html5shiv and Html5shim is only "M" and "V", no other difference! Of course, that's not what I said. The original text is: ... the only difference was that "one had an M and one have a v-that ' s it."

Here is to make a special note: IE is unique to the comment judgment:

LTE: is less than or equal to the shorthand, that is, smaller than or equal to the meaning.

LT: is less than shorthand, that is, smaller than the meaning.

GTE: is greater than or equal to the shorthand, that is, greater than or equal to the meaning.

GT: is greater than shorthand, that is, the meaning of greater than.

! : Is not equal to the meaning of the JavaScript is not equal to the same judge

Because IE9 although support HTML5 label, but support is not very complete, so, can also write "LTE", it depends on your choice!

Of course, don't forget to specify the display property of the new label, in most cases I want the tag to be block:

Header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}

2. How to nest tags

In fact, it is in the semantics of the HTML5 tag nested div and other available tags, and then only to the Div writing style, I am not in favor of such a notation. This is not as good as giving the label a semantic ID or class!

<!--[If LT IE 9]><style>body > *. section {    color: #ff0;} </style><! [endif]--><style>section. Section {    color: #f00;} </style><section><div class= "section" > Content Test ...</div></section>

However, if the structure is similar to this, use and no protection:

<nav >        <ul class= "Test" >            <li></li>            <li></li>            <li></ li>        </ul>    </nav>


3. IE condition Comment

<!--[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]-->

Look again at IE's unique comment judgment:

LTE: is less than or equal to the shorthand, that is, smaller than or equal to the meaning.

LT: is less than shorthand, that is, smaller than the meaning.

GTE: is greater than or equal to the shorthand, that is, greater than or equal to the meaning.

GT: is greater than shorthand, that is, the meaning of greater than.

! : Is not equal to the meaning of the JavaScript is not equal to the same judge

I believe we all understand how this is going! This is a more egg-aching way! A lot of HTML code makes the code that was meant to be semantically more confusing. And to the writing of the style is also unfavorable.

4. Use xmlns to define the document's life in my Space

xmlns is the abbreviation of XHTML namespace, the so-called "namespace". As with the DOCTYPE declaration, xmlns also belongs to a declaration. Unlike the DOCTYPE declaration that still exists in an HTML document, there is no xmlns in the HTML document, and the xmlns we normally see is in the XHTML document.

This is the original XHTML namespace, which has been simplified since HTML5.

The method from the Elco Klingen log began to attract widespread attention. The technique contains an XML-like namespace and uses elements that contain the namespace prefix, such as:

<! DOCTYPE html>

: HTML5 This prefix is not a standard notation, you can also use other characters instead: HL5 is also possible. With the prefix, IE will recognize the new element, so that the style can be applied. As effective in other browsers, finally, you have succeeded in building the same elements and styles in each browser.

There is a clear flaw in this approach: you have to use XML-formatted namespaces in HTML documents, and you need to do this in CSS as well:

html5\:section {display:block;}

What about the compatibility of JS? Here is a test deml

<! DOCTYPE html>

Test results, ie6\7\8 test pass, but Fixfox and chrome only the ID can be obtained, so this method is also not a desirable method!

Several scenarios that are compatible with the HTML5 tag of the Ie6\7\8 browser

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.