ホームページ  >  記事  >  ウェブフロントエンド  >  IE9 (ie6/7/8) 以下のバージョンに html5 要素を認識させる方法_html5 チュートリアル スキル

IE9 (ie6/7/8) 以下のバージョンに html5 要素を認識させる方法_html5 チュートリアル スキル

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

各ブラウザには、サポートする HTML 要素のリストがあります。リストにない要素は未知の要素とみなされます。ブラウザーは、不明な要素に対してスタイルを設定しません (ブラウザーが異なれば、要素のデフォルト スタイルも異なります)。 IE9 より前のバージョンでは、不明な要素のスタイルを設定できません。不明な要素の DOM も正しく表示されず、IE は子要素のない空のノードを DOM に挿入します。この未知の要素の子であると考えられるすべての要素は、その兄弟になります。

この問題には解決策があります。IE がこの要素を認識し、CSS でのスタイルの設定をサポートする前に、js を使用して偽の記事要素を作成します。この偽の要素は DOM に挿入する必要さえありません。

次の例を参照してください:

コードをコピーします
コードは次のとおりです:





不明な要素




feimos のブログへようこそ

> ;

この Web サイトに 初めてアクセスします。




html>

IE6 では記事が認識されないため、赤枠は表示されません。

IE9 (ie6/7/8) 以下のバージョンに html5 要素を認識させる方法_html5 チュートリアル スキル

しかし、頭に js 文を追加すると、状況はすぐに異なります。

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



IE6 は、この要素を認識したふりをして効果を正しく表示します。

IE9 (ie6/7/8) 以下のバージョンに html5 要素を認識させる方法_html5 チュートリアル スキル

すべての新しい HTML5 要素の偽のコピーを一度作成できるため、将来的に HTML5 を十分にサポートしないブラウザについて心配する必要はありません。 Remy Sharp の HTML5 有効化スクリプトは、これらのことを行うのに役立ちます。スクリプトの基本的な考え方は次のとおりです。

コードをコピーします
。コードは次のとおりです。



まず条件付きコメントを使用して IE9 より前のバージョンかどうかを判断し、そうである場合は js を実行します。まず、すべての新しいタグを e 配列に書き込み、次に配列全体を反復処理してコピーを作成します。

このスクリプトは Google Project Hosting でホストされています。このスクリプトに直接リンクできます:

コードをコピーします
コードは次のとおりです:



さらに、このスクリプトはページの先頭に配置する必要があります。底に置くのではなく、頭の中に置きます。このようにして、IE はページ タグを解析する前にこのコードを実行します。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。