Comment: HTML5 provides developers with many new tags, such as section, nav, article, header and footer. These tags are highly semantic and will be used frequently, but they are not recognized and used normally in old browsers such as IE6, IE7, IE8 and Firefox 2. This has always been angered by many netizens. Next, how to eliminate this anger
HTML5 provides developers with many new tags, such as section, nav, article, header, footer, etc. These tags are highly semantic and will be used frequently, but they cannot be recognized and used normally in old browsers such as IE6, IE7, IE8 and Firefox 2.
Why can't old-fashioned browsers recognize these tags?In fact, the fault is not the browser, because this kind of tag did not exist at all in that era, so it cannot be correctly identified. This unusual tag recognition makes the DOM structure abnormal.
We have the test code as follows. It is an article content with the title and blue words, and the article content uses the article tag.
<!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</h1>
<article>
This is the content of the article, it should be a piece of blue text. In old browsers, if you don't do hacks, an exception will be displayed.
</article>
</body>
</html>
In IE8, the following is displayed.
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 listed as brother nodes along with the article content, as shown in the figure below.
How to use HTML5 tags in old-fashioned browsers?Since it cannot be used because it cannot be recognized, the solution is to make the tags recognized. Fortunately, simply using document.createElement(tagName) can let the browser recognize the tag and the CSS engine know the existence of the tag. Suppose the following code is added to the <head> area of our example above.
<script>
document.createElement('article');
</script>
The DOM explanation in IE8 will become the following figure.
Naturally, the text also appears in normal blue.
ConclusionThe blog has long switched to HTML5 writing, but because many users do not use the latest browser, they have been using HTML4 tag sets. Many tags in HTML5 are semantic and practical. I have also started to try some commonly used tags, and now they use article and time tags.