Shulou(Shulou.com)06/03 Report--

Editor to share with you how to solve the problem of compatible IE6\ 7\ 8 does not support html5 tags, I hope you will gain something after reading this article, let's discuss it together!

The time has come for html5 to be popular. If you're still waiting for the browser to be compatible, you've been out of touch with web for a few blocks. Of course, this is due to the vigorous development of mobile clients. If you are still struggling with whether you should master html5 and css3 technology, please slap yourself a few mouths, and then study hard. Because the front end of the spring has come, and more than one spring.

Let's take a look at a standard html5 tag structure: (I'm just talking about tags here, nothing else)

The code is as follows:

Html5

The improvement of the html5 tag is of course more intuitive in its semantics. Of course, this is only one of html5's progress, some people suggested: do not say that html5's progress is revolutionary, but developmental! I have no objection to this view, but it is revolutionary in some ways. We don't want to stray from the subject here, let's just talk about the label.

Of course, when you are excited about such a wonderful semantic tag, you not only have to ask: does IE support it? Unfortunately, the answer is no. If you are already scared by IE, you have to continue to endure its endless torment. (IE9 and IE10 are already compatible with html5 and css3.0)

But be thankful that you live in a time when there are many geniuses. Someone has solved this problem for you! Although, it can not be called perfect!

Let's take a look at several ways to solve the problem that compatible IE6\ 7\ 8 does not support html5 tags:

1. _ javascript: document.createElenment (".")

Part of the reason IE6\ 7\ 8 does not support is that they do not consider footer to be a valid html tag. So why don't we just "make" it into a label? The most direct way, of course, is to create javascript: document.createElenment (".")!

The code is as follows:

(function () {

Var element= ['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption']

Len=element.length

While (len--) {

Document.createElement (Element [I])

}

) ()

This is simply to create a few typical html5 tags so that they can become tags in IE6\ 7\ 8.

Someone has written a complete js file, you just need to introduce it, like this:

There is also writing.

The only difference between html5shiv and html5shim is "m" and "v", and there is no other difference! Of course, that's not what I said. The original text is: the only difference is that "one has an m and one has a v-that's it."

Here is a special note: it is the annotation judgment unique to IE:

Lte: it's short for Less than or equal to, which means less than or equal to.

Lt: it's the abbreviation of Less than, which means less than.

Gte: it's short for Greater than or equal to, which means greater than or equal to.

Gt: it is the abbreviation of Greater than, which means greater than.

!: it means that it is not equal to, and it is the same as the unequal judgment character in javascript.

Because IE9 supports html5 tags, but the support is not very complete, so you can also write "lte", depending on your choice!

Of course, don't forget to specify the display attribute of the new tag. In most cases, I want the tag to be block:

The code is as follows:

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

2. The method of nesting tags

In fact, to put it bluntly, the semantic html5 tag nesting div and other available tags, and then only write a style for div, I do not approve of this way of writing. It would be better to give the tag a semantic id or class!

The code is as follows:

Section .section {color: # f00

}

Content testing.

But if it is similar to this structure, there is no defense for its use:

The code is as follows:

3. IE condition notes

The code is as follows:

.

Take a look at the IE-specific comment judgment again:

Lte: it's short for Less than or equal to, which means less than or equal to.

Lt: it's the abbreviation of Less than, which means less than.

Gte: it's short for Greater than or equal to, which means greater than or equal to.

Gt: it is the abbreviation of Greater than, which means greater than.

!: it means that it is not equal to, and it is the same as the unequal judgment character in javascript.

I believe we all understand what this is all about! This is a more painful way! A large amount of html code makes the code that was intended to be semantic even more confusing. And it is also disadvantageous to the style of writing.

4. Use xmlns to define the life space of a document

Xmlns is the abbreviation of XHTML namespace, which is the so-called "namespace". Like the DOCTYPE declaration, xmlns is a declaration. Unlike DOCTYPE declarations that still exist in HTML documents, there is no xmlns in HTML documents, and the xmlns we usually see appears in XHTML documents.

This is the original namespace of xhtml, which has been simplified since html5.

The method from the Elco Klingen log attracted a lot of attention at first. This technique includes a namespace in the form of XML and uses elements with namespace prefixes, such as:

The code is as follows:

The prefix html5 is not a standard way to write, you can also use other characters instead: hl5 is also possible. With the prefix in place, IE recognizes the new element so that the style can be applied. It works just as well in other browsers, so in the end, you successfully build the same elements and styles in each browser.

There is an obvious drawback to this approach: you must use XML-formatted namespaces in HTML documents, as well as in css:

The code is as follows:

Html5\: section {

Display: block

}

What about compatibility with js? Here is a test deml

The code is as follows:

; html5

Html5\: section {display: block; width:100px; height:50px; background:#f00; border: 1px solid blue; color: # ff0;}

_ window.onload = function () {

Alert (document.getElementById ("test") [xss_clean] + "--id")

Alert (document.getElementsByTagName ("section") [0] [xss_clean] + "--TagName")

Alert (document.getElementsByTagName ("SECTION") [0] [xss_clean] + "- uppercase")

}

Content

The test results show that IE6\ 7\ 8 has passed the test, but only id can get it in fixfox and chrome, so this method is also not a desirable method!

After reading this article, I believe you have a certain understanding of "how to solve the problem of compatible IE6\ 7\ 8 does not support html5 tags". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.