HTML5 Shiv は IE (IE6/IE7/IE8) が HTML5 タグ_JavaScript スキルと互換性がないという問題を完全に解決します

HTML5 のセマンティック タグと属性を使用すると、開発者は CSS3 効果のレンダリングと組み合わせて、明確な Web ページ レイアウトを簡単に実装でき、リッチで柔軟な Web ページを迅速に作成できます。

HTML5 の新しいタグ要素は次のとおりです:

ページまたはセクションのヘッダーを定義します。

ページまたはセクションのフッターを定義します。

ページまたはセクションのナビゲーション領域を定義します。

ページ上の論理領域またはコンテンツの組み合わせ。

テキストまたは完全なコンテンツを定義します。

補足コンテンツまたは関連コンテンツを定義します;




これらを使用すると、コードのセマンティクスがより直感的になり、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(', ');
   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*/
記事、余談、ダイアログ、フッター、ヘッダー、セクション、フッター、ナビゲーション、図、メニュー{表示:ブロック}

しかし、IE6/7/8 のユーザーがスクリプトを無効にすると、スタイルのない「ホワイトボード」Web ページになります。これをどう解決すればよいでしょうか?

Facebook のアプローチに従うことができます。これは、ユーザーを noscript ロゴのある「/?_fb_noscript=1」ページに誘導し、html5 タグを html4 タグに置き換えるというものです。これは、維持するために多くのハックを記述するよりも簡単です。互換性があります。

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

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