天天看點

HTML5浏覽器支援

該執行個體向 HTML 添加的新的元素,并為該元素定義樣式,元素名為 <myHero> :

執行個體:

<!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>

注:JavaScript 語句 document.createElement("myHero") 是為了為 IE 浏覽器添加新的元素。

Internet Explorer 浏覽器問題

你可以使用以上的方法來為 IE 浏覽器添加 HTML5 元素,但是:Internet Explorer 8 及更早 IE 版本的浏覽器不支援以上的方式。

我們可以使用 Sjoerd Visscher 建立的 "HTML5 Enabling JavaScript", " shiv" 來解決該問題:

<!--[if lt IE 9]>

  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

以上代碼是一個注釋,作用是在 IE 浏覽器的版本小于 IE9 時将讀取 html5.js 檔案,并解析它。

注意:國内使用者請使用百度靜态資源庫(Google 資源庫在國内不穩定):

<!--[if lt IE 9]>

  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

<![endif]-->

針對IE浏覽器html5shiv 是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識别,這些新元素不能作為父節點包裹子元素,并且不能應用CSS樣式。

完美的 Shiv 解決方案

執行個體:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Styling HTML5</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>

學技術,從W3Cschool開始!

</article>

</body>

</html>

注:html5shiv.js 引用代碼必須放在  <head> 元素中,因為 IE 浏覽器在解析 HTML5 新元素時需要先加載該檔案。

繼續閱讀