HTML5 browser support
You can get some older browsers (which don’t support HTML5) to support HTML5.
HTML5 browser support
Modern browsers support HTML5.
In addition, all browsers, both old and up-to-date, automatically treat unrecognized elements as inline elements.
Because of this, you can “teach” browsers to deal with “unknown” HTML elements.
You can even teach IE6 (Windows XP 2001) browsers to handle unknown HTML elements.
Define a HTML5 element as a block element
HTML5 defines eight new HTML semantic elements. All these elements are block-level elements.
In order for older browsers to display these elements correctly, you can set the CSS’s display property value is block :
Example
header,section,footer,aside,nav,main,article,figure{display:block;}
Add a new element to HTML
You can do it for HTML add a new element.
The instance directs to HTML add a new element and define a style for the element, named <myHero> :
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add new elements to HTML</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My first title</h1>
<p>My first paragraph.</p>
<myHero>My first new element</myHero>
</body>
</html>
JavaScript statement document.createElement("myHero") is to add a new element to the IE browser.
Internet Explorer browser issu
You can use the above methods to add for IE browsers HTML5 element, but:
Browsers of Internet Explorer 8 and earlier IE versions do not support the above methods.
We can use “HTML5 Enabling JavaScript”, “shiv” created by Sjoerd Visscher to solve this problem:
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
The above code is a comment that reads when the version of the IE browser is less than IE9 html5.js file and parse it.
Note: domestic users please use the static resource library of this site (Google resource library is unstable in China):
<!--[if lt IE 9]>
<script
src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
For IE browsers html5shiv is a better solution. html5shiv the main problem is that the new elements proposed by HTML5 are not recognized by IE6-8, these new elements can not be used as parent nodes to wrap child elements, and the CSS style can not be applied.
Perfect Shiv solution
Example
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Rendering
HTML5</title><!--[if lt IE 9]> <script
src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]--></head><body><h1>My First Article</h1><article>Rookie Tutorial ——
Learning is not only about technology, but also about dreams!!!</article></body></html>
html5shiv.js the reference code must be placed in the <head> element, because the IE browser needs to load the file before parsing the new HTML5 element.