IE6/7/8 は CSS3 とどのように互換性がありますか_html/css_WEB-ITnose

最近、仕事でIE8をCSS3属性に対応させてほしいといつもお願いしているのですが、ネットで調べて主にhtcファイル（ie-css3.htcまたはPIE.htc）を導入しました。個人的には、この2つのファイルは似たような機能があると思います。具体的な違いがあるので検討してみる価値があります)

ダウンロード アドレス: https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3

サポートされている主な CSS3 プロパティ:

1.border-radius 角丸

CSSコードは次のとおりです。

using using through using width:250px;

height:250px;

背景色:#34538b;

-moz-box-shadow:1px 3px 3px #666; webkit-box-shadow:1px 3px 3px #666;

box-shadow:1px 3px 3px #666 ;グラデーション

CSS コードは次のとおりです:

.pie_gradient{

width:250px;

height:250px;

背景:-webkit-gradient(linear, 0 0, 0bottom,から(# 9F9), to(#393));

background:-moz-linear-gradient(#9F9, #393 ;

IE でのこれらの CSS3 の効果は、コンテナー要素を描画する VML の助けを借りて実現されます。角丸または投影効果を使用して、ターゲット要素の後続の兄弟ノードとしてコンテナ要素を挿入します。ターゲット要素がposition:absoluteまたはposition:relativeの場合、このcss3コンテナ要素は同じzに設定されます。 -index 値。DOM ツリーでは、同じレベルの要素が常に前の要素をカバーするため、これによりカバレッジが達成され、他の要素がそこに挿入される可能性が回避されます。そこで、現在の要素の位置属性がデフォルトの属性である場合、z-index 属性は役に立たず、オーバーライドされません。したがって、IE ブラウザーでの CSS3 のレンダリングは行われません。現時点では成功しました。

解決策も非常に簡単で、ターゲット要素のposition:relativeを設定するか、祖先要素のposition:relativeを設定してz-index値（-1は不可）を割り当てます。 htmlドキュメントに対するIEブラウザの動作属性。これにより、pie.htc ファイルの使用がより簡単になります。絶対パスがルート ディレクトリにある場合は、CSS ファイルを移動するのが不便です。相対パスが HTML ドキュメントにある場合は、別の HTML ページでの pie.htc ファイルの再利用性が大幅に低下します。同時に、border-image の後ろにあるような URL 属性パスも扱いが困難です。

IE で CSS3 レンダリングを実装するには、PIE を使用します (他のメソッドにも同じことが当てはまります)。 上部を表すために、border-top-left-radius を設定できます。左角丸ですが、PIE この書き方を本当に支持しない人は、正直な略語のみを使用できます。

d. IE ブラウザで htc ファイルをサポートしたい場合は、「text/x-component」という単語を含むコンテンツ タイプ ヘッダーが必要です。それ以外の場合、動作は無視されます。大多数の Web サーバーは正しいコンテンツ タイプを提供しますが、一部には問題があります。

e。 何らかの理由で、サーバー構成 (パブリック ホスト、スペース サービス プロバイダーによって提供されるサーバーなど) を変更することはできません。PHP ファイルを使用して、htc ファイルを間接的に呼び出すことができます。 & & Lt;? Php Header ('Content-Type: Text/X-Component'); Include ('PIE.HTC'); & GT; pie.htc ファイルを呼び出します。 Pie.php と pie.htc は同じフォルダーに配置する必要があります。同時に、CSS での動作を次のように記述する必要があります。 詳細については、

を参照してください。 http：// sina.com.cn/s/blog_65c2ec5e0101crvo.html