IEがHTML5タグに対応していない問題をHTML5 Shivを使って解決する方法

この記事は、IE (IE6/IE7/IE8) が HTML5 タグと互換性がないという問題を完全に解決する HTML5 Shiv の方法を主に紹介します。必要な友達はそれを参照してください

HTML5 のセマンティックタグと属性を使用すると、非常に便利になります。明確な Web ページ レイアウトと CSS3 効果のレンダリングにより、リッチで柔軟な Web ページを迅速に作成することが非常に簡単になります。
HTML5 の新しいタグ要素は次のとおりです。

はページまたはセクションの先頭を定義します。

はページのナビゲーション領域を定義します。セクション;
2f8332c8dcfd5c7dec030a070bf652c3 ページの論理領域またはコンテンツの組み合わせ
15221ee8cba27fc1d7a26c47a001eb9b を使用すると、コードのセマンティクスがより直感的になり、SEO の最適化にも便利になります。ただし、この新しい HTML5 タグは IE6/IE7/IE8 では認識されないため、JavaScript 処理が必要です。ここではいくつかの方法を紹介します。

方法 1: JavaScript のコーディング

<!--[if lt IE9]> 
<script> 
  (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(&#39;, &#39;);
   var i= e.length;
   while (i--){
     document.createElement(e[i])
   } 
})() 
</script>
<![endif]-->

IE9 より前の IE ブラウザの場合は、HTML5 タグが作成されるため、IE 以外のブラウザはこのコードを無視し、不要な http リクエストが発生しなくなります。

2番目の方法: Googleのhtml5shivパッケージを使用する(推奨)

<!--[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

国内のGoogleサーバーアクセスカードのため、国内のcdnを呼び出すことをお勧めします

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

上記のメソッドを使用すると、すべて新しいタグの CSS を初期化する必要があります。HTML5 はデフォルトでインライン要素として動作するため、これらの要素をレイアウトするには、CSS を使用して手動でブロック要素に変換する必要があります

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

しかし、ie6 の場合は/7/8 スクリプトを無効にすると、スタイルのない「ホワイトボード」Web ページになります。これを解決するにはどうすればよいでしょうか。Facebook のアプローチに倣って、noscript を使用して「/?_fb_noscript=1」ページにユーザーを誘導します。これは、互換性を維持するために多くのハックを記述するよりも軽量です。

<!--[if lte IE 8]> 
<noscript>
   <style>.html5-wrappers{display:none!important;}</style>
   <p class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
   </p>
</noscript>
<![endif]-->

これにより、ユーザーはスクリプトを開くか、HTML4 タグ設計インターフェイスに直接ジャンプすることができます。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

html5は、主要なブラウザと互換性のあるプレーヤーの分析を実装します

html5のvideoタグがmp4を再生できない問題の解決策

以上がIEがHTML5タグに対応していない問題をHTML5 Shivを使って解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。