HTML5 browser support
HTML5 browser support
You can make some older browsers (that do not support HTML5) support HTML5.
HTML5 browser supportSupport
Modern browsers support HTML5.
In addition, all browsers, both old and recent, will automatically handle unrecognized elements as inline elements.
Because of this, you can "teach" the browser to handle "unknown" HTML elements.
You can even teach the IE6 (Windows XP 2001) browser to handle unknown HTML elements.
Defining HTML5 elements as block elements
HTML5 defines 8 new HTML semantic elements. All these elements are block-level elements.
In order to allow older versions of browsers to display these elements correctly, you can set the CSS display attribute value to block:
Example
header, section, footer, aside, nav, main, article, figure {
display: block;
}Adding new elements to HTML
You can add new elements to HTML.
This example adds a new element to HTML and defines a style for the element. The element is named <myHero>:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>為 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>標題</h1>
<p>內容</p>
<myHero>元素</myHero>
</body>
</html>Internet Explorer browser problem
You can use the above method to add HTML5 elements for IE browser, but:
Internet Explorer 8 and earlier IE versions The browser does not support the above method.
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, which is used when the IE browser version is smaller than IE9 will read the html5.js file and parse it.
Note: Domestic users please use Baidu static resource library (Google resource library is unstable in China):
<!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
html5shiv is a better solution for IE browser. html5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6-8. These new elements cannot be used as parent nodes to wrap child elements, and CSS styles cannot be applied.
Perfect Shiv Solution
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>shiv</title> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <h1>文章標題：簡單是一種方法</h1> <article> 橄欖樹嘲笑無花果樹說： “你的葉子到冬天時就落光了，光禿禿的樹枝可真難看，哪像我終 年翠綠，美麗無比。 ”不久，一場大雪降臨了，橄欖樹身上都是翠綠的葉子，雪堆積在上面， 最后由于重量太大把樹枝壓斷了， 橄欖樹的美麗也遭到了破壞。 而無花果樹由于葉子已經(jīng)落 盡了， 全身簡單，雪穿過樹枝落在地上， 結果無花果樹安然無恙。 外表的美麗不一定適應環(huán) 境有時是一種負擔， 而且往往會因為生存帶來麻煩或災難。 相反， 平平常常倒能活得自由自 在。所以， 不如放下你外表虛榮的美麗， 或者是不實的身份和地位，踏踏實實地去體會真實 簡單的生活，相信這樣你將獲得更多的樂趣。 </article> </body> </html>
