ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 Shiv は IE (IE6/IE7/IE8) が HTML5 タグ_JavaScript スキルと互換性がないという問題を完全に解決します

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

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

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

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

1aa9e5d373740b65a0cc8f0a02150c53ページまたはセクションのヘッダーを定義します。
c37f8231a37e88427e62669260f0074dページまたはセクションのフッターを定義します。
c787b9a589a3ece771e842a6176cf8e9ページまたはセクションのナビゲーション領域を定義します。
2f8332c8dcfd5c7dec030a070bf652c3 ページ上の論理領域またはコンテンツの組み合わせ。 23c3de37f2f9ebcb477c4a90aac6fffdテキストまたは完全なコンテンツを定義します。
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(', ');
   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 タグ設計インターフェイスに直接ジャンプすることができます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。