rgba背景とIEフィルタ代替：IE9は両方をレンダリングします！

私は使用はCSS3 rgba()の混合物と、このようなMicrosoftのfilterプロパティを使用してのdivの背景を透明にしようとしている：rgba背景とIEフィルタ代替：IE9は両方をレンダリングします！

div { 
    width: 200px; 
    height: 200px; 
    /* blue, 50% alpha */ 
    background: rgba(0,0,255,0.5); 
    /* red, 50% alpha */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000); 
}

予想したように、rgba()をサポートするブラウザは、IE 6のに対し、青などのdivをレンダリングします8を赤色にします。

IE9は明らかに両方とも（以前は私がfilterのサポートが削除されていると思っていました）対応することができ、結果は紫 divです。 IE9にこれらのプロパティのいずれかをサポートさせる方法はありますか？明らかに好ましいであろう。

N.B.私はこれらのテストを実行するためにIETesterを使用しています。 IE9の適切なビルドがこれをしない場合は、私に知らせてください。

出典

2011-06-28 Liam Newmarch

私は共有したいと思ったハックの回避策を作ってみました。

IE9以上では、CSS疑似セレクタ:not()がサポートされています。要素上に存在しない属性を使用することにより、我々はIE9が無効に得ることができ、それはfilter勾配です：

div { 
    width: 200px; 
    height: 200px; 

    /* For FF, Chome, Opera, IE9+ */ 
    background: rgba(0,0,255,0.5); 

    /* For IE6-9 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000); 
} 

div:not([dummy]) { 
    /* IE9 only */ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); 
}

が、私は私の透明div要素は一度しか備えているので、これを使用して終了しました。また、HTMLで条件付きのコメントを使用するのではなく、CSSを保つのがちょっと面白いようでした。

編集：他の回答を支持して、私は私のようなCSSの回避策は、Microsoftの開発チームからthis articleは、条件付きコメントを使用する開発者を奨励しないことが判明しました。

出典

2011-06-29 11:41:07

私が探していたものです。どうも！ – frequent

条件付きコメントを使用してブラウザ/バージョンターゲティングを確認してください。特定のバージョンのIEをターゲットにして、バージョンごとにスタイリングを実装する必要があります。

http://www.positioniseverything.net/articles/cc-plus.html

出典

2011-06-28 14:45:23

これは私にとってはうまくいくようです（すべてのバージョンでは完全にテストされていません）。 thisの議論によれば：ルートセレクタはIE9でのみ利用可能であるため、以下のコードはIE9のすべてのフィルタ設定を削除するように記述することができます。

:root * 
{ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important; 
}

編集：！それはすべての場所で動作することを確認するために必要な重要。

出典

2011-11-15 12:37:30 Anttu

[Web Essentials]（http://vswebessentials.com/）によると、ブラウザのレンダリングに大きな悪影響を与えるため、汎用セレクタは使用しないでください。良いニュースは '：not（[dummy]）'は '：root *'のために入れ替えることができます – bbodenmiller

あなたはHTML5を使用している場合は、

<!doctype html> 
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="ie7 oldie"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="ie8 oldie"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> 
<html lang="en" class="gtie9 modern"> 
<!--<![endif]-->

とあなたのCSSを使用してのようなもの使用してのルート下に行きたいことがあります。

.ie9 .element {filter: none; }

出典

2011-12-07 12:11:58

フィルタのための最も簡単で確実な方法を：私が見つけた互換性は、コードhttp://www.colorzilla.com/gradient-editor/を使用して生成します：

それを必要とする要素にgradient CSSクラスを追加します。以上です。

条件付きコメントはまだまだハックのビットですが、私の意見では、一般的なセレクタなどのようなものではありません。パフォーマンスのリスクはありません。

MicrosoftはIE10以上の条件付きコメントを削除したことを覚えておいてください。ただし、これらのバージョンではほとんど必要ありません。

IETesterも信頼できません。適切なIE9を搭載した仮想マシンをhttps://www.modern.ie/en-gbからダウンロードしてください。無料です。時間とディスクスペースが必要です（元のダウンロードをそのままにしておくと、再インストールできます）

出典

2015-02-04 08:37:11

rgba背景とIEフィルタ代替：IE9は両方をレンダリングします！

答えて

関連する問題