ホームページ > 記事 > ウェブフロントエンド > IE6 シリーズなどの古いブラウザでの HTML5 を使用した新しいタグの実装_html5 チュートリアルのヒント

IE6 シリーズなどの古いブラウザでの HTML5 を使用した新しいタグの実装_html5 チュートリアルのヒント

WBOYオリジナル: 2016-05-16 15:50:311339ブラウズ

HTML5 は、セクション、ナビゲーション、記事、ヘッダーとフッターなどの多くの新しいタグを開発者に提供します。これらのタグは高度なセマンティックであり、頻繁に使用されますが、IE6、IE7、IE8 などの旧式のタグでは使用されません。 Firefox 2 ブラウザでは正常に認識されず、使用できません。

なぜ古いブラウザはこれらのタグを認識しないのですか?

実際、問題はブラウザにあるわけではありません。当時はそのようなタグが存在しなかったため、正しく認識できず、この異常なタグ認識により DOM 構造が異常になりました。

以下のようなテストコードがあります。青字の記事タイトルと記事内容であり、記事内容は記事タグを使用しています。

コードをコピーします

コードは次のとおりです:

<head>

テスト
article{color:#06F;}

<article>
これは記事の内容です。青い文字になっているはずです。古いブラウザでは、ハッキングを行わないと例外が表示されます。

IE8では以下のように表示されます。

IE8 は記事タグを認識できず、タグに定義されている CSS スタイルは効果がありません。IE8 では、<article> は、記事と並列された <article /> と </article /> という名前の 2 つの空のタグ要素として解釈されます。以下に示すように、これは兄弟ノードです。

古いブラウザで HTML5 タグを使用するにはどうすればよいですか?

はタグが認識できないため使用できないため、解決策はタグを認識させることです。幸いなことに、document.createElement(tagName) を使用するだけでブラウザにタグを認識させ、CSS エンジンにタグの存在を知らせることができます。上記の例を想定して、次のコードを <head> 領域に追加します。 >