search

Home  >  Article  >  Web Front-end  >  Implementation of new tags using HTML5 in old browsers such as IE6 series_html5 tutorial tips

Implementation of new tags using HTML5 in old browsers such as IE6 series_html5 tutorial tips

WBOY
WBOYOriginal
2016-05-16 15:50:311389browse

HTML5 provides developers with many new tags, such as section, nav, article, header and footer, etc. These tags are highly semantic and will be used frequently, but in old-fashioned tags such as IE6, IE7, IE8 and Firefox 2 It cannot be recognized and used normally in the browser.

Why don’t older browsers recognize these tags?

In fact, the fault is not with the browser, because such tags did not exist at that time, so they could not be recognized correctly, and this unusual tag recognition made the DOM structure abnormal.

We have the test code as follows. It is an article title and article content in blue words, in which the article content uses the article tag.

Copy code
The code is as follows:



<head>

Test
article{color:#06F;}




Article title
<article>
This is the content of the article, it should be a blue text. In older browsers, if you don't do a hack it will show an exception.




In IE8, it is displayed as follows.

IE8 cannot recognize the article tag, and the CSS style defined on the tag has no effect. In IE8, <article> is interpreted as two empty tag elements named <article /> and </article />, which are juxtaposed with the article content. It is a sibling node, as shown below.

How to use HTML5 tags in older browsers? Since

cannot be used because the tag cannot be recognized, the solution is to make the tag recognized. Fortunately, simply by using document.createElement(tagName), you can let the browser recognize the tag and the CSS engine know the existence of the tag. Assume our example above Add the following code to the <head> area. ><script><br> document.createElement('article');<br></script>

The DOM interpretation in IE8 will become as shown below.
Naturally, the text is also displayed in normal blue.




Conclusion

The blog has long been converted to HTML5, but because many users do not use the latest browsers, they are still using the HTML4 tag set. Many HTML5 tags are semantic and practical, and I have also begun to try some commonly used tags. , now using article and time tags.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5 voice search only requires one line of code_html5 tutorial tipsNext article：HTML5 voice search only requires one line of code_html5 tutorial tips

Related articles

See more