[北大青鳥深圳嘉華]如何解決HTML5瀏覽器支持問題
2016-01-21 15:34:56 來源:
[導(dǎo)讀] 瀏覽器有新舊之分,對(duì)于現(xiàn)在的瀏覽器,很多都支持HTML5,但是也不能排除你的用戶中有人正在使用如IE6(WindowsXP2001)瀏覽器之類的老瀏覽器了,如何讓他們也支持HTML5?將HTML5元素定義為塊元素HTML5定了8個(gè)新的HTML語義(semantic)元素。所有這些元素都是塊級(jí)元素。為了能讓舊版本的
將 HTML5 元素定義為塊元素
HTML5 定了 8 個(gè)新的 HTML 語義(semantic) 元素。所有這些元素都是 塊級(jí) 元素。
為了能讓舊版本的瀏覽器正確顯示這些元素,你可以設(shè)置 CSS 的 display 屬性值為 block:
實(shí)例
header, section, footer, aside, nav, main, article, figure {
display: block;
}
為 HTML 添加新元素
你可以為 HTML 添加新的元素。
該實(shí)例向 HTML 添加的新的元素,并為該元素定義樣式,元素名為 <myHero> :
實(shí)例
<!DOCTYPE html>
<html>
<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
<myHero>我的第一個(gè)新元素</myHero>
</body>
</html>
JavaScript 語句 document.createElement("myHero") 是為了為 IE 瀏覽器添加新的元素。
Internet Explorer 瀏覽器問題
你可以使用以上的方法來為 IE 瀏覽器添加 HTML5 元素,但是:
Note Internet Explorer 8 及更早 IE 版本的瀏覽器不支持以上的方式。
幸運(yùn)的是, Sjoerd Visscher 創(chuàng)建了 "HTML5 Enabling JavaScript", " shiv":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代碼是一個(gè)注釋,作用是在 IE 瀏覽器的版本小于 IE9 時(shí)將讀取 html5.js 文件,并解析它。
注意:國(guó)內(nèi)用戶請(qǐng)使用百度靜態(tài)資源庫(Google 資源庫在國(guó)內(nèi)不穩(wěn)定):
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
針對(duì)IE瀏覽器html5shiv 是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識(shí)別,這些新元素不能作為父節(jié)點(diǎn)包裹子元素,并且不能應(yīng)用CSS樣式。
完美的 Shiv 解決方案
實(shí)例
<!DOCTYPE html>
<html>
<head>
<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>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</article>
</body>
</html>
html5shiv.js 引用代碼必須放在 <head> 元素中,因?yàn)?nbsp;IE 瀏覽器在解析 HTML5 新元素時(shí)需要先加載該文件。