Comment: The browser will not set any style for unknown elements (different browsers will have different default styles for elements). In versions before IE9, it is also impossible to set styles for unknown elements. There is a solution to this problem. Interested friends can refer to it.
Each browser has a list of the HTML elements it supports. Elements not on the list will be considered unknown elements. The browser will not set any style for unknown elements (different browsers will have different default styles for elements). In versions before IE9, it is also impossible to style unknown elements. The DOM of unknown elements is also displayed incorrectly, and IE will insert an empty node without child elements into the DOM. All elements you originally thought would become children of this unknown element will become their brother nodes.
There is a solution to this problem. Before using the article tag, use js to create a false article element, and IE will recognize this element, and support using css to set styles. This fake element doesn't even need to be inserted into the DOM.
Please see the following example:
< !DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>unknown elements</title>
<style>
article{display:block;border:1px solid red}
</style>
</meta></head>
<body>
<article>
<h1>welcome to feimos's blog</h1>
<p>This is your <span>first time to visit this webSite.</span></p>
</article>
</body>
</html>
IE6 will not recognize articles, so there will be no red borders.
But if we add a sentence js to the head, the situation will be different immediately.
<script type="text/javascript">
document.createElement("article");
</script>
IE6 pretends that it recognizes this element and correctly displays the effect.
We can create a fake copy of all new HTML5 elements at once, so we don't need to worry about browsers that don't support HTML5 well in the future. Remy Sharp's HTML5 enabling script helps us do these things. The basic idea of this script is as follows:
<!--[if lt IE 9]>
<script type="text/javascript">
var e=("abbr,article,aside,audio,canvas,datalist,details,"+
"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+
"progress,section,time,video").split(',');
for(var i=0;i<e .length;i++){
document.createElement(e[i]);
}
</script>
< ![endif]-->
First, use conditional annotations to determine whether it is a version before IE9, and if so, execute js. First write all new tags into the e array, then iterate through the entire array and create a copy.
The script is already hosted on Google Project Hosting, you can directly link this script:
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->
In addition, this script needs to be placed at the beginning of the page, preferably in the head, not at the bottom. In this way, IE will run this code before parsing the page tag.