HTML5 瀏覽器支持
你可以讓一些較早的瀏覽器(不支持HTML5)支持HTML5。
HTML5 瀏覽器支持
現代的瀏覽器都支持HTML5。
此外,所有瀏覽器,包括舊的和最新的,對無法識別的元素會作為內聯元素自動處理。
正因為如此,你可以"教會"瀏覽器處理"未知"的HTML元素。
甚至你可以教會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 > 為HTML添加新元素 </ title >
< script >
document . createElement ( " myHero " )
</ script >
< style >
myHero {
display: block ; background-color: #ddd ; padding: 50 px ; font-size: 30 px ; }
</ 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]-->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代碼是一個註釋,作用是在IE 瀏覽器的版本小於IE9 時將讀取html5.js 文件,並解析它。
注意:國內用戶請使用本站靜態資源庫(Google資源庫在國內不穩定):
<!--[if lt IE 9]>
<script src="http://cdn.static.w3big.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<script src="http://cdn.static.w3big.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>渲染HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.w3big.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>我的第一篇文章</h1>
<article>
本教程—— 學的不僅是技術,更是夢想! ! !
</article>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>渲染HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.w3big.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>我的第一篇文章</h1>
<article>
本教程—— 學的不僅是技術,更是夢想! ! !
</article>
</body>
</html>
嘗試一下»
html5shiv.js 引用代碼必須放在<head> 元素中,因為IE 瀏覽器在解析HTML5 新元素時需要先加載該文件。