Comment: More and more sites are starting to use HTML5 tags, but the current situation is that many people are still using IE6, IE7, and IE8. In order to allow all viewers to access normally, the following two solutions are available
More and more sites are starting to use HTML5 tags, but the current situation is that many people are still using IE6, IE7, and IE8. In order to allow all viewers to access normally, the solutions are as follows:1. Create multiple sets of templates for the website, and use the program to judge User-Agent to show different pages for different browser users, such as Youku.
2. Use Javascript to make HTML tags supported by browsers that do not support HTML5.
A better solution for IE is html5shiv. htnl5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6-8. These new elements cannot be wrapped as parent nodes, and cannot apply CSS style. To apply CSS styles on unknown elements, you can achieve it by executing document.createElement(elementName). html5shiv is created based on this principle.
The use of html5shiv is very simple. Considering that IE9 supports html5, you only need to add the following code to the page head:
<!--[if lt IE 9]--><script src=" "></script ><!--[endif]-->
html5shiv official website:
Here are some additions:
Of course, including my BLOG. Regarding HTML5, I have to mention IE. When mainstream browser manufacturers such as Apple, Google, Opera and Mozilla actively participated in the formulation and promotion of the new version of HTML standards, Microsoft disdained the HTML 5 specification. However, Microsoft recently stated that it would support HTML 5 in IE, so that IE8 and the following cannot support HTML5 tags so far. But at sitepoint, I found a way to make IE support HTML5.
The following is an example displayed in IE 8, before processing:
To make IE (including IE6) support HTML5 elements, we need to add the following JavaScript to the HTML header. This is a simple document.createElement declaration, using conditional annotations to create corresponding nodes in the object for IE.
<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->
After adding the above code, the effect displayed in IE8 is as follows:
The JavaScript code for creating nodes in the sitepoint example seems to be too bloated, and the code provided in smokemagazine seems to be more concise.
The demonstration is as follows
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
HTML5 is manifested as inline elements by default. When laying out these elements, we need to manually convert them into block elements using CSS, as shown in the following example:
header, footer, nav, section, article {
display:block;
}