The era of html5 becoming popular has arrived. If you are still waiting for browser compatibility, it means you are already out of touch with the web. Of course, this is due to the booming development of mobile clients. If you are still wondering whether you should master HTML5 and CSS3 technologies, please slap yourself in the mouth a few times, and then study hard! Because the spring of the front end has arrived, and there is more than one spring. If you don’t believe it, I can only say: Believe it or not!
Let’s look at a standard html5 tag structure: (I’m just talking about tags here, nothing else is involved)
The progress of html5 tags Of course, its semantics are more intuitive. Of course, this is just a drop in the bucket of the progress of html5. Some people suggest: Don’t say that the progress of html5 is revolutionary, but developmental! I don't disagree with this statement, but it is indeed revolutionary in some respects. I don’t want to go off topic here, let’s just talk about labels.
Of course, when you are excited about such wonderful semantic tags, you still have to ask: Does IE support it? Unfortunately, the answer is no. If you are already scared of IE, you will have to continue to endure its endless torture. (IE9 and IE10 are already compatible with HTML5 and CSS3.0)
But you have to be lucky, there are many geniuses in this era you live in. Someone has already solved this problem for you! Although, it cannot be called perfect!
Let’s look at a few methods to solve the problem of compatibility with IE678 that does not support html5 tags:
1. javascript: document.createElenment("...")
Part of the reason why IE678 doesn't support it is that they don't consider footer to be a valid html tag. So wouldn’t it be enough if we “make” it into a label? The most direct way is, of course, to create it using javascript: 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])
}
})();
This simply creates a few typical html5 tags so that they can become tags in IE678.
Someone has already written a complete js file, you only need to import it, like this:
There is also writing
But if something like this The structure is easy to use:
3. IE conditional comments
Look at IE’s unique comment judgment again:
lte: It is the abbreviation of Less than or equal to, which means less than or equal to. .
lt: It is the abbreviation of Less than, which means less than.
gte: It is the abbreviation of 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 not equal to, which is the same as the inequality judgment symbol in JavaScript.
I believe everyone understands what is going on! This is an even more painful method! A large amount of html code makes the code that was originally intended to be semantic even more confusing. And it’s not good for style writing.
4. Use xmlns to define the namespace of the document xmlns is the abbreviation of XHTML namespace, which is the so-called "namespace". Like the DOCTYPE declaration, xmlns is also a declaration. Unlike the DOCTYPE statement that still exists in HTML documents, xmlns does not exist in HTML documents. The xmlns we usually see appear in XHTML documents.
This is the original namespace of xhtml, which has been simplified after HTML5.
The method from Elco Klingen's log initially attracted a lot of attention. This technique consists of a namespace in XML form and uses elements containing the namespace prefix, for example:
: The prefix html5 is not a standard way of writing, you can also use other characters instead: hl5 is also possible. With the prefix, IE will recognize the new element and can apply styles. works equally well in other browsers, then in the end, you have successfully built the same elements and the same styles in every browser.
This method obviously has a flaw: you must use the XML format namespace in the HTML document. Similarly, you also need to do this in css:
html5:section {
display: block;
}
So what is the compatibility with js? The following is a test deml
;html5
<script> <br>window.onload = function(){ <br>alert (document.getElementById("test").innerHTML "---id") <br>alert(document.getElementsByTagName("section")[0].innerHTML "---TagName") <br>alert(document. getElementsByTagName("SECTION")[0].innerHTML "---uppercase") <br>} <br></script>
< html5:section id="test">Content
Test results, IE678 all passed the test , but only the ID can be obtained in fixfox and chrome, so this method is also not a desirable method!