H5、C3に対応していない古いバージョンのブラウザへの対処方法-H5 チュートリアル-php.cn

H5、C3に対応していない古いバージョンのブラウザへの対処方法

php中世界最好的语言

リリース： 2018-01-09 10:25:21

オリジナル

4474 人が閲覧しました

今回は古いバージョンのブラウザがH5とC3に対応していない問題の対処法をお届けします。古いバージョンのブラウザをHTML5に対応させるにはどうすればよいですか？ H5 および C3 と互換性のある古いバージョンのブラウザに対する注意事項は何ですか? ここで実際のケースを見てみましょう。

HTML5 は私たちにとって多くのことを可能にします。最も便利なのは、HTML5 をサポートする Chrome やその他のブラウザーでその優れた機能を使用したことがある場合、この記事が間違いなく役立つでしょう。 IE でも HTML5 を使用できます。

最初の方法: Google の html5shiv パッケージを使用します (推奨)

まず、以下の Google の html5.js ファイルを引用する必要があります。メリットについては説明しません:

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

ログイン後にコピー

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

主なことは、これらの html5 タグをブロックにすることです。 div のように。さて、簡単にしましょう。一文で説明します: html5.js を引用して html5 タグをブロックにします

2 番目の方法: コーディング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]-->

ログイン後にコピー

しかし、上記のどの方法が使用されても、新しいタグの 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」ページに誘導し、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 タグ設計インターフェイスに直接ジャンプすることができます。

2. 古いブラウザを CSS3 に対応させる (不完全な互換性解決策)

Internet Explorer 8 以降、IE シリーズは CSS3 をサポートしていません。 IE でよく使用される効果 (角丸や影など) を実行するには、冗長で意味のない要素や画像を使用してこれらの効果を作成する必要があります。これらにうんざりした後、私はこれらの問題を解決するために、より簡潔で直接的で効果的な CSS3 スタイルの方法を使用することを考えました。幸いなことに、多くの批判を受けてきた Internet Explorer でさえ、それ自体で十分強力です。 IE の独自のテクノロジーにより、一部の CSS3 効果を非常にうまく実現できます。

OpacityTransparency

要素の透明度は、IE のフィルターを使用して簡単に実現できます。

background-color:green;   
opacity: .4;   
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

ログイン後にコピー

ここに半透明の領域があります
opacity: .4;

filter:alpha(opacity=40);

border-radius/Box Shadowボックスシャドウ/Text Shadowテキストシャドウ

IE言語ではベクトルマークアップを使用できます( VML) と JavaScript を使用してこれらの効果を実現するには、IE-CSS3 を参照してください。HTC ファイルを参照した後、これらの 3 つの CSS3 プロパティを IE ブラウザで使用できます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。