コメント:ブラウザは、未知の要素のスタイルを設定しません(異なるブラウザには、要素の異なるデフォルトスタイルがあります)。 IE9以前のバージョンでは、未知の要素にスタイルを設定することも不可能です。この問題の解決策があります。興味のある友達はそれを参照できます。
各ブラウザには、サポートするHTML要素のリストがあります。リストに載っていない要素は、不明な要素と見なされます。ブラウザは、未知の要素のスタイルを設定しません(異なるブラウザには、要素のデフォルトスタイルが異なります)。 IE9以前のバージョンでは、未知の要素をスタイリングすることも不可能です。未知の要素のDOMも誤って表示され、IEは子要素のない空のノードをDOMに挿入します。あなたが元々この未知の要素の子供になると思っていたすべての要素は、彼らの兄弟ノードになります。
この問題の解決策があります。記事タグを使用する前に、JSを使用して誤った記事要素を作成すると、IEはこの要素を認識し、CSSを使用してスタイルを設定することをサポートします。この偽の要素をDOMに挿入する必要さえありません。
次の例をご覧ください。
<!doctype html>
<html lang = "en">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title>不明な要素</title>
<style>
記事{展示:ブロック;境界線:1pxソリッドレッド}
</style>
</meta> </head>
<body>
<記事>
<h1> Feimosのブログへようこそ</h1>
<p>これは、このWebサイトにアクセスした初めての<span>です。</span> </p>
</article>
</body>
</html>
IE6は記事を認識していないため、赤い境界線はありません。
しかし、頭に文を追加すると、状況はすぐに異なります。
<script type = "text/javascript">
document.createelement( "article");
</script>
IE6は、この要素を認識し、効果を正しく表示するふりをします。
すべての新しいHTML5要素の偽コピーを一度に作成できるため、将来HTML5をうまくサポートしていないブラウザを心配する必要はありません。 Remy SharpのHTML5を有効にするスクリプトは、これらのことを行うのに役立ちます。このスクリプトの基本的なアイデアは次のとおりです。
<! - [lt ie 9]>
<script type = "text/javascript">
var e =( "abbr、記事、脇、オーディオ、キャンバス、データリスト、詳細"+
「フィギュア、フッター、ヘッダー、hgroup、マーク、メニュー、メーター、ナビゲーション、出力」、+
「進行、セクション、時間、ビデオ」)。分割( '、');
for(var i = 0; i <e .length; i ++){
document.createelement(e [i]);
}
</script>
<![endif] - >
まず、条件付き注釈を使用して、IE9の前のバージョンであるかどうか、もしそうならJSを実行します。最初にすべての新しいタグをE配列に書き込み、次に配列全体を反復し、コピーを作成します。
スクリプトはすでにGoogleプロジェクトホスティングでホストされています。このスクリプトを直接リンクできます。
<! - [lt ie 9]>
<スクリプトsrc = "// html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif] - >
さらに、このスクリプトは、ページの最初に、できれば下部ではなく、頭に配置する必要があります。このようにして、IEはページタグを解析する前にこのコードを実行します。