ホームページ  >  記事  >  ウェブフロントエンド  >  Internet Explorer を HTML5 対応ブラウザにする解決策 (html5shiv を使用)_html5 チュートリアル スキル

Internet Explorer を HTML5 対応ブラウザにする解決策 (html5shiv を使用)_html5 チュートリアル スキル

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

現在、HTML5 はますます注目を集めていますが、HTML5 をサポートするブラウザはまだ主流ではありません。特に、HTML5 をサポートする IE9 は Xp システムのインストールをサポートしていないため、まだ 50% 近くのユーザーが使用しています。将来に影響を与える HTML5 開発者は、長い間、下位互換性の問題を考慮する必要があります。 HTML5 タグまたは CSS セレクターとの互換性を実現するには多くの方法がありますが、その 1 つはタグ要素を自分で生成することです。

基本原理については、IE8 での次のコードの効果を参照してください。スタイルはまったく効果がありません。


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






こんにちは!< /mxria>




ブラウザが タグを認識し、対応するスタイルの効果を表示するには、次のように js を追加すると、別の効果が表示されます。



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

< head>

<script>document.createElement("mxria")</script>
🎜>







これで秘密がわかりました!はい、それは document.createElement です。HTML5 shiv はすべての HTML5 タグを再生成するような js プラグインです。プラグインをロードすると、HTML5 プログラムがすべてのブラウザーで認識されます。 ダウンロード アドレス: http://html5shim.googlecode.com/svn/trunk/html5.js


trunk/html5.js を使用する簡単な方法:

以下は Google から引用した html5.js ファイルです:

html5shiv の使用は非常に簡単で、IE9 が html5 をサポートしていることを考慮すると、次のコードをページの先頭に追加するだけです:



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



上記のコードを head セクションにコピーします。これが head セクションである必要があることに注意してください (要素が解析される前に IE はこの要素を認識する必要があるため、この js ファイルは他の場所から呼び出すことができません。そうしないと無効になります)

もちろん、コードを取り出して自分で理解することもできます:

(function(){if(!/*@cc_on!@*/0)return;var e="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header ,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i] )}})()

最後に次の段落を CSS に追加します:


/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

主に、これらの html5 タグを div などのブロックにします。


わかりました。簡単に説明すると、HTML5 タグをブロック化するには html5.js を引用します

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:HTMl5 ストレージ メソッド sessionStorage および localStorage_html5 チュートリアル スキルの詳細な説明次の記事:HTMl5 ストレージ メソッド sessionStorage および localStorage_html5 チュートリアル スキルの詳細な説明

関連記事

続きを見る