ホームページ > 記事 > ウェブフロントエンド > HTML5 および CSS3 とのブラウザ互換性の問題
HTML5 と CSS3 は非常に使いやすく、強力な新しい属性です。唯一の大きな欠点は、多くの古いブラウザーが互換性がない可能性があることです。今日は、古いブラウザーと HTML5 と CSS3 の互換性の問題について説明します。
1. 古いブラウザに HTML5 をサポートさせましょう
HTML5 は私たちにとって多くのことを可能にします。最も便利なのはセマンティック タグの適用です。Chrome または HTML5 をサポートする他のブラウザで使用したことがある場合は、これは素晴らしいことです。 IE でも HTML5 を使用できるようになったので、この記事はきっと役立つはずです。
最初の方法: Google の html5shiv パッケージを使用します (推奨)
JavaScript コードを次の場所にコピーします。クリップボード
主なことは、これらの html5 タグを p のようなブロックにすることです。さて、シンプルに、一文でまとめましょう: html5.js を引用して html5 タグをブロックにします
2 番目の方法: JavaScript のコーディング
JavaScript コードの内容をクリップボードにコピーします1.<!--[if lt IE9]> 2.<script> 3. (function() { 4. if (! 5. /*@cc_on!@*/ 6. 0) return; 7. 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(', '); 8. var i= e.length; 9. while (i--){ 10. document.createElement(e[i]) 11. } 12.})() 13.</script> 14.<![endif]-->
として動作するため、これらの要素をレイアウトするには、CSS を使用して手動でブロック要素に変換し、簡単にレイアウトする必要があります
XML/ HTML コード コンテンツをクリップボードにコピーします
1./*html5*/
ただし、ie6/7/ の場合8 は無効になっています スクリプトのユーザーにとっては、スタイルのない「ホワイトボード」Web ページになります。これを解決するにはどうすればよいでしょうか。Facebook のアプローチを参照して、ユーザーを「/?_fb_noscript=1」ページに誘導します。 noscript ロゴ。 html5 タグを html4 タグに置き換えることは、互換性を維持するために多くのハックを記述するよりも簡単です。
XML/HTML コードはコンテンツをクリップボードにコピーします
1.<!--[if lte IE 8]> 2.<noscript> 3. <style>.html5-wrappers{display:none!important;}</style> 4. <p class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>. 5. </p> 6.</noscript> 7.<![endif]-->
これにより、ユーザーはスクリプトを開くか、HTML4 タグ設計インターフェイスに直接ジャンプすることができます。
2. 古いブラウザを CSS3 と互換性を持たせる(不完全な互換性解決策)
Internet Explorer 8 の時点では、IE シリーズは CSS3 をサポートしていません。 IE でよく使用される効果 (角丸や影など) を実行するには、冗長で意味のない要素や画像を使用してこれらの効果を作成する必要があります。これらにうんざりした後、私はこれらの問題を解決するために、より簡潔で直接的で効果的な CSS3 スタイルの方法を使用することを考えました。幸いなことに、多くの批判を受けてきた Internet Explorer でさえ、それ自体で十分強力です。 IE の独自のテクノロジーにより、一部の CSS3 効果を非常にうまく実現できます。
不透明度の透明度
要素の透明度は、IE のフィルターを使用して簡単に実現できます。
CSS コードはコンテンツをクリップボードにコピーします
1.background-color:green; 2.opacity: .4; 3.filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);
これが半透明の領域です
不透明度: .4; filter:alpha(opacity=40);
border-radius/Box Shadow/Text Shadow Shadow
あなたVector Markup Language (VML) と JavaScript を使用して、IE でこれらの効果を実現できます。IE-CSS3 を参照してください。HTC ファイルを参照した後、これらの 3 つの CSS3 プロパティを
IE ブラウザで使用できます。
CSS コードはコンテンツをクリップボードにコピーします1.-moz-border-radius: 15px; /* Firefox */
2.-webkit-border-radius: 15px; /* Safari 、Chrome */
3.border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/
4.-moz-box-shadow: 5px 5px 5px #000; /* Firefox */
5.-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */
6.box-shadow: 5px 5px 50px #000; /* Opera 10.5+,IE6+ 使用 IE-CSS3 */
7.behavior: url(ie-css3.htc); /*引用ie-css3.htc */
実際、IE にはシャドウとドロップシャドウ効果を実現するための独自のフィルターがあります
shadow は連続したグラデーションのシャドウを生成します
CSS コードはコンテンツをクリップボードにコピーします
1.filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);CSS コードはコンテンツをクリップボードにコピーします
1.filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5" ,Positive="1");フィルターは既存の htc スクリプトと競合するようですが、機能と呼ぶこともできます。両方が要素で同時に有効になっている場合、フィルター効果はその子要素に転送されます
HTML Web ページ レイアウトにおける div と span の違いは何ですか
以上がHTML5 および CSS3 とのブラウザ互換性の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。