HTML5 瀏覽器支援



你可以讓一些較早的瀏覽器(不支援HTML5)支援 HTML5。


HTML5 瀏覽器支援

現代的瀏覽器都支援 HTML5。

此外,所有瀏覽器,包括舊的和最新的,對無法識別的元素會作為內聯元素自動處理。

正因為如此,你可以 "教會" 瀏覽器處理 "未知" 的 HTML 元素。


Note#甚至可以教會IE6  (Windows XP 2001) 瀏覽器處理未知的HTML 元素。

將HTML5 元素定義為區塊元素

HTML5 訂了8 個新的HTML 語意(semantic)  元素。所有這些元素都是區塊級 元素。

為了能讓舊版的瀏覽器正確顯示這些元素,你可以設定CSS 的display 屬性值為block:

實例

header, section, footer, aside, nav, main, article, figure {
    display: block;
}


為 HTML 新增元素

你可以為 HTML 新增新的元素。

此實例向HTML 新增的新的元素,並為該元素定義樣式,元素名稱為<myHero>

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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 元素,但:


NoteInternet 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>php中文网(php.cn)</title> 
<meta charset="utf-8">
<title>渲染 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>
	php中文网 ——  php中文网!!
	</article>

</body>
</html>

運行實例»##點擊"執行實例" 按鈕查看線上實例

html5shiv.js 引用程式碼必須放在 <head> 元素中,因為IE 瀏覽器在解析HTML5 新元素時需要先載入該檔案。