旧ブラウザのHTML5・CSS3互換性問題について詳しく解説

以下のエディターは、古いブラウザと HTML5 および CSS3 の互換性に関する記事を提供します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして見てみましょう

1. 古いブラウザに HTML5 をサポートさせてください

HTML5 でできることはたくさんありますが、最も便利なのはセマンティック タグの適用です (すでに Chrome またはその他のサポートを使用している場合)。 HTML5 ブラウザで HTML5 を使用したことがある場合は、IE でも HTML5 を使用できるようになったため、この記事が役立つはずです。
最初の方法: Google の html5shiv パッケージを使用します (推奨)

まず、Google から次の html5.js ファイルを引用する必要があります。利点については説明しません:

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

• 
  

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

主なことは、これらの html5 タグを p のようにブロックにすることです。さて、一文で簡単に説明しましょう: 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ページになります。これを解決するにはどうすればよいでしょうか?ガイド ユーザーは、noscript ロゴのある

"/?_fb_noscript=1"

ページに入り、html5 タグを html4 タグに置き換えます。これは、互換性を維持するために多くのハックを記述するよりも簡単です。

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

• 
  

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

2. 古いブラウザを CSS3 と互換性を持たせる（不完全な互換性解決策）

Internet Explorer 8 以降、IE シリーズは CSS3 をサポートしていません。角丸や影など、IE でよく使用される効果を作成するには、冗長で無意味な要素と 画像

を使用してこれらの効果を作成する必要があります。これらにうんざりした後、私はこれらの問題を解決するために、より簡潔で直接的かつ効果的な CSS3 スタイルの方法を使用することを考えました。幸いなことに、批判されている Internet Explorer でさえ、それ自体で十分強力です。 IE の独自のテクノロジーにより、一部の CSS3 効果を非常にうまく実現できます。

不透明度の透明度

要素の透明度は、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 でこれらの効果を実現するには、Vector Markup Language (VML) と JavaScript を使用できます。IE を参照してください - CSS3、HTC ファイルを参照した後、これら 3 つの CSS3 プロパティ を IE ブラウザーで使用できます。

CSS コード

コンテンツをクリップボードにコピーします

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 、Chrome */
border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/
-moz-box-shadow: 5px 5px 5px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */
box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */
behavior: url(ie-css3.htc); /*引用ie-css3.htc */

実際、IE にはシャドウとドロップシャドウ効果を実現するための独自のフィルターがあります

shadow は連続的なグラデーションシャドウを生成します

filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);

ドロップシャドウには明暗の変化がありません

filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");

フィルターは既存の htc スクリプトと競合するようです、または機能と呼ぶことができます。両方が要素上で同時に有効になっている場合、フィルター効果は転送されますその子要素へ

以上が旧ブラウザのHTML5・CSS3互換性問題について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。