Comments: The era of html5 has arrived. If you are still struggling with whether you should master html5 and css3 technologies, please stick to your mouth and study hard! Next, let's take a look at several solutions that are compatible with IE6 \ 7 \ 8 and do not support html5 tags. The era of html5 has come. If you are still waiting for browser compatibility, it means you are out of touch with the web. Of course, this is due to the booming development of mobile clients. If you are still struggling with the html5 and css3 technologies, please stick to your mouth and study hard! Because the front-end spring has arrived, and there is more than one spring. If you do not believe it, I can only say: Believe it or not!
Next, let's look at a standard html5 tag structure: (I am only talking about tags here, and nothing else is involved)
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "gb2312">
<Title> html5 </title>
</Head>
<Body>
<Header>
<Nav> </nav>
</Header>
<Article>
<Section>
<H2> <P> </p>
</Section>
</Article>
<Footer> </footer>
</Body>
</Html>
Of course, the progress of html5 tags is more intuitive in semantics. Of course, this is only Mao, one of the top five in html5's progress. Some people suggest: Do not say that html5's progress is revolutionary, but developmental! I don't disagree with this, but some aspects are indeed revolutionary. I don't want to run the question here. We just want to talk about labels.
Of course, when we are excited by such a wonderful semantic tag, we have to ask: Is IE supported? Unfortunately, the answer is no. If you are afraid of Internet Explorer, you have to endure it. (IE9 and IE10 are compatible with html5 and css3.0)
But you must be glad that there are many geniuses in your life. Someone has helped you solve this problem! Although not perfect!
Here are several solutions that are compatible with IE6 \ 7 \ 8 and do not support html5 labels:
1. javascript: document. createElenment ("......")
IE6 \ 7 \ 8 is not supported because they do not consider footer as a valid html Tag. Can we just make it into a tag? The most direct method is, of course, to create javascript: document. createElenment ("......")!
The Code is as follows:
(Function (){
Var element = ['header', 'footer ', 'Article', 'aside', 'region', 'nav', 'menu ', 'hgroup', 'details ', 'did', 'figure ', 'figcaption'],
Len = element. length;
While (len --){
Document. createElement (element [I])
}
})();
This is just a simple creation of several typical html5 tags, so that they can become tags in IE6 \ 7 \ 8.
Someone has already written a complete js file, and you only need to introduce it as follows:
<! -- [If lt ie 9]>
<Script src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<! [Endif] --> 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". There is no other difference! Of course this is not what I said. 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 comment judgment unique to IE:
Lte: Short for Less than or equal to, that is, Less than or equal.
Lt: Short for Less than, that is, Less.
Gte: Short for Greater than or equal to, that is, Greater than or equal.
Gt: Short for Greater than, that is, Greater.
! : It means not equal to, which is the same as the non-equal identifier in javascript.
Although IE9 supports html5 tags, it does not fully support them. Therefore, you can also write "lte", depending on your choice!
Of course, do not 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. nested label Method
In fact, to put it bluntly, there are available tags such as nested div in the semantic html5 tag, and then only the style is written for the div, which I do not agree. It is better to give the tag a semantic id or class!
The Code is as follows:
<! -- [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 such a structure is used, no defense is required.:
The Code is as follows:
<Nav>
<Ul class = "test">
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Nav>
3. IE condition comments
The Code is as follows:
<! -- [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] -->
Let's take a look at the comments specific to IE:
Lte: Short for Less than or equal to, that is, Less than or equal.
Lt: Short for Less than, that is, Less.
Gte: Short for Greater than or equal to, that is, Greater than or equal.
Gt: Short for Greater than, that is, Greater.
! : It means not equal to, which is the same as the non-equal identifier in javascript.
I believe everyone understands what is going on! This is a more painful way! A large amount of html code makes semantic-oriented code more messy. It is not good for style Writing.
4. Use xmlns to define the life space of the document
Xmlns is the abbreviation of XHTML namespace, also known as "namespace ". Like the DOCTYPE declaration, xmlns is also a declaration. Unlike the DOCTYPE declaration that still exists in HTML documents, xmlns does not exist in HTML documents. We usually see xmlns appear in XHTML documents.
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "en"> This is the original namespace of xhtml, Which is simplified after html 5 ,.
<Html lang = "en"> the methods from Elco Klingen logs have attracted wide attention at the beginning. This technology contains a namespace in XML format and uses elements with a namespace prefix, for example:
The Code is as follows:
<! Doctype html>
<Html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/html5/">
<Body>
<Html5: section>
<! -- Content -->
</Html5: section>
</Body>
</Html>
: The html5 prefix is not a standard method. You can also use another character instead: hl5. With a prefix, IE recognizes new elements and applies styles. In other browsers, the same elements and styles are successfully built in each browser.
This method has obvious drawbacks: you must use a namespace in XML format in HTML documents. Similarly, you also need to do this in css:
The Code is as follows:
Html5 \: section {
Display: block;
}
How is the compatibility with js? Below is a test deml
The Code is as follows:
<! Doctype html>
<Html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/html5/">
<Head>
<Title>; html5 </title>
<Meta charset = "gb2312">
<Style>
Html5 \: section {display: block; width: 100px; height: 50px; background: # f00; border: 1px solid blue; color: # ff0 ;}
</Style>
<Script>
Window. onload = function (){
Alert (document. getElementById ("test"). innerHTML + "--- id ")
Alert (document. getElementsByTagName ("section") [0]. innerHTML + "--- TagName ")
Alert (document. getElementsByTagName ("SECTION") [0]. innerHTML + "--- uppercase ")
}
</Script>
</Head>
<Body>
<Html5: section id = "test"> content </Body>
</Html>
Test results: IE6 \ 7 \ 8 passed the test, but only the id in fixfox and chrome can be obtained. Therefore, this method is also not a desirable method!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
