HTML5ブラウザのサポート

一部の古いブラウザ (HTML5 をサポートしていない) を HTML5 にサポートさせることができます。

HTML5 ブラウザのサポート

最新のブラウザは HTML5 をサポートしています。

さらに、古いブラウザでも新しいブラウザでも、認識されない要素は自動的にインライン要素として扱われます。

このため、「不明な」 HTML 要素を処理するようにブラウザに 「教える」 ことができます。

	IE6 (Windows XP 2001) ブラウザに未知の HTML 要素を処理するように教えることもできます。

HTML5 要素をブロック要素として定義します

HTML5 では、8 つの新しい HTML セマンティック 要素が定義されています。これらの要素はすべてブロックレベルの要素です。

古いバージョンのブラウザでこれらの要素を正しく表示できるようにするには、CSS display 属性値を block:

Example

header、section、footer、side、nav、main、article に設定できます。、図{
display: block;
}

HTML に新しい要素を追加する

HTML に新しい要素を追加できます。

このインスタンスは、HTML に新しい要素を追加し、要素のスタイルを定義します。<myHero>:

Instance

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

Run Instance»

[Run Instance] をクリックします。ボタンオンラインの例を表示

JavaScript ステートメント document.createElement("myHero") は、IE ブラウザーに新しい要素を追加します。

Internet Explorer ブラウザの問題

上記の方法を使用して HTML5 要素を IE ブラウザに追加できますが、次のことが起こります:

	Internet Explorer 8 およびそれ以前の IE バージョンのブラウザは、上記の方法。

この問題は、Sjoerd Visscher が作成した「HTML5 Enabling JavaScript」「 shiv」を使用して解決できます:

上記のコードは、IE のバージョンで使用されるコメントです。 IE9 未満のブラウザは html5.js ファイルを読み取って解析します。

注: 国内ユーザーは Baidu 静的リソースライブラリを使用してください (Google リソースライブラリは中国では不安定です):

html5shiv は、IE ブラウザプランのより良いソリューションです。 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 要素を解析するときに最初にこのファイルをロードする必要があるためです。

HTML5ブラウザのサポート