Use HTML5 new tag Implementation Scheme in IE6 series and other old-fashioned browsers

Source: Internet
Author: User

Comments: HTML5 provides developers with many new labels, such as section, nav, article, header, and footer. these tags are frequently used because of their high degree of semantics. However, in old browsers such as IE6, IE7, IE8, and Firefox 2, they cannot be identified and used normally, next we will introduce how to eliminate this anger.

HTML5 provides developers with many new labels, such as section, nav, article, header, and footer. these labels are highly semantic and often used. However, they cannot be recognized and used properly in old browsers such as IE6, IE7, IE8, and Firefox 2.

Why can't old browsers recognize these labels?

In fact, the error is not in the browser, because this tag does not exist in that era, so it cannot be identified correctly, and this unusual tag recognition makes the DOM structure abnormal.

The test code is as follows: it is the title of an article and the content of a blue text article. The article content uses the article tag.

The Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-CN">
<Head>
<Meta charset = "UTF-8"/>
<Title> test </title>
<Style>
Article {color: # 06F ;}
</Style>
</Head>

<Body>
<H1> Article Title <Article>
This is the content of the article. It should be a piece of blue text. In older browsers, if you do not use hack, an exception is displayed.
</Article>
</Body>
</Html>

In IE8, the following is displayed.

IE8 does not recognize the article label. The CSS style defined on the label does not work. In IE8,<article>Interpreted as "name"<article />And</article />Two empty tag elements, and the content of the article, are listed as sibling nodes, such.

How do I use HTML5 labels in older browsers?

Since tags cannot be identified and cannot be used, the solution is to identify tags. Fortunatelydocument.createElement(tagName)This allows the browser to identify the tag and the CSS engine to know the existence of the tag.Add the following code to the region.

The Code is as follows:
<Script>
Document. createElement ('Article ');
</Script>

The DOM interpretation in IE8 is shown in.

Naturally, the text is displayed in normal blue.

Conclusion

The blog has been switched to HTML5 for a long time, but many users are still using HTML 4 label sets without using the latest browsers. many HTML5 labels are highly semantic and practical. I also started to try some commonly used labels. Now I use the article and time labels.


Related Article

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.