ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 Shiv -- IE (IE6/IE7/IE8) が HTML5 タグに対応していない問題の解決方法

HTML5 Shiv -- IE (IE6/IE7/IE8) が HTML5 タグに対応していない問題の解決方法

高洛峰
高洛峰オリジナル
2017-02-09 14:51:331832ブラウズ

HTML5 のセマンティック タグと属性を使用すると、開発者は明確な Web ページ レイアウトを簡単に実装できます。ほとんどのブラウザは基本的にhtml5に対応していますが、現時点ではie6/ie7/ie8はhtml5タグに対応していないため、対応させるためには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 HTML5タグ以下のIEブラウザの場合。 IE 以外のブラウザがこのコードを無視し、不必要な http リクエストが発生しないように作成されます。

方法 2: Google の html5shiv パッケージを使用する

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

(ps: リンクされた Web ページを開くには FQ が必要で、FQ しても Web ページを開いたときに表示されるページはパス 0 で試行するダイヤラーが残っていません)

Due国内の Google へのサーバー アクセス カードについては、国内の cdn に電話することをお勧めします

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

このリンクは個人テスト用に利用できます

js 部分は書かれていますが、まだ小さな問題があります。 ie6/7/8 でスクリプトを無効にすると、使用できなくなります。「ホワイトボード」Web ページのスタイルをどのように解決すればよいでしょうか?

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

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

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

js 部分は解決され、今度は css 部分が来ます。 CSS は、レイアウト設定を容易にするために、これらの新しい要素を初期化する必要があります。

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

注: 開発中に遭遇したいくつかの実際的な問題を要約しておきます。内容は比較的基本的なものです。類似点はまったくの偶然です

HTML5 Shiv-IE (IE6/IE7/IE8) の互換性のない HTML5 タグを解決する方法に関するその他の記事については、PHP 中国語 Web サイトに注目してください。

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