Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > 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
Release： 2016-05-16 15:50:31
Original
1421 people have browsed it

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.
Related labels：
HTML5标签 老式浏览器
source：php.cn
Previous article：HTML5 voice search only requires one line of code_html5 tutorial tips Next article：Canvas study notes in html5 1-The size of the drawing board and the actual display size_html5 tutorial skills
Statement of this Website
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
Latest Articles by Author
Latest Issues
SQL Count() also requires 0 I have only one table and I want to count each entry of a tag that starts with 0. Now I tr...
From 2024-04-06 19:48:53
0
1
449
Why is my hr tag translucent when it is set to a solid color of white? I have a html (with bootstrap) and a css, in my html I have a <hr> tag which has a c...
From 2024-04-06 16:13:26
0
1
500
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Parent's padding ignored by sticky positioned child How to prevent sticky elements from going behind the header? The current code snippet uses...
From 2024-04-06 11:42:51
0
1
338
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template