HTML5ブラウザのサポート
HTML5 ブラウザのサポート
一部の古いブラウザ (HTML5 をサポートしていない) で HTML5 をサポートすることができます。
HTML5 ブラウザのサポートサポート
最新のブラウザは HTML5 をサポートしています。
さらに、新舊を問(wèn)わずすべてのブラウザーは、認(rèn)識(shí)されない要素を自動(dòng)的にインライン要素として扱います。
このため、ブラウザに「未知の」HTML 要素を処理するように「教える」ことができます。
IE6 (Windows XP 2001) ブラウザに未知の HTML 要素を処理するよう教えることもできます。
HTML5 要素をブロック要素として定義します
HTML5 では、8 つの新しい HTML セマンティック要素が定義されています。これらの要素はすべてブロックレベルの要素です。
古いバージョンのブラウザでこれらの要素を正しく表示できるようにするには、CSS 表示屬性値をブロックに設(shè)定できます:
Instance
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: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>標(biāo)題</h1>
<p>內(nèi)容</p>
<myHero>元素</myHero>
</body>
</html>Internet Explorer ブラウザーの問(wèn)題
上記のメソッドを使用して、 HTML5 要素を IE ブラウザーに追加しますが、:
Internet Explorer 8 およびそれ以前の IE バージョンのブラウザーは、上記の方法をサポートしていません。
この問(wèn)題を解決するには、Sjoerd Visscher によって作成された「HTML5 Enabling JavaScript」「shiv」を使用できます:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
上記のコードはコメントであり、IE ブラウザーのバージョンが 1 である場(chǎng)合に html5.js ファイルを読み取るために使用されます。 IE9 より小さいものを解析してください。
注: 國(guó)內(nèi)ユーザーは Baidu 靜的リソース ライブラリを使用してください (Google リソース ライブラリは中國(guó)では不安定です):
<!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
html5shiv は IE ブラウザにとってより良いソリューションです。 html5shiv は主に、HTML5 で提案された新しい要素が IE6-8 で認(rèn)識(shí)されず、子要素をラップする親ノードとして使用できず、CSS スタイルを適用できないという問(wèn)題を解決します。
完璧な Shiv ソリューション
例
<!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>文章標(biāo)題：簡(jiǎn)單是一種方法</h1> <article> 橄欖樹(shù)嘲笑無(wú)花果樹(shù)說(shuō)： “你的葉子到冬天時(shí)就落光了，光禿禿的樹(shù)枝可真難看，哪像我終 年翠綠，美麗無(wú)比。 ”不久，一場(chǎng)大雪降臨了，橄欖樹(shù)身上都是翠綠的葉子，雪堆積在上面， 最后由于重量太大把樹(shù)枝壓斷了， 橄欖樹(shù)的美麗也遭到了破壞。 而無(wú)花果樹(shù)由于葉子已經(jīng)落 盡了， 全身簡(jiǎn)單，雪穿過(guò)樹(shù)枝落在地上， 結(jié)果無(wú)花果樹(shù)安然無(wú)恙。 外表的美麗不一定適應(yīng)環(huán) 境有時(shí)是一種負(fù)擔(dān)， 而且往往會(huì)因?yàn)樯鎺?lái)麻煩或?yàn)?zāi)難。 相反， 平平常常倒能活得自由自 在。所以， 不如放下你外表虛榮的美麗， 或者是不實(shí)的身份和地位，踏踏實(shí)實(shí)地去體會(huì)真實(shí) 簡(jiǎn)單的生活，相信這樣你將獲得更多的樂(lè)趣。 </article> </body> </html>
