web-dev-qa-db-ja.com

IEフィルターの代替：IE9は両方をレンダリングします！

CSS3 rgba()とMicrosoftのfilterプロパティを次のように組み合わせて、divの背景を透明にしようとしています。

_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()をサポートするブラウザーは、divを青でレンダリングしますが、IE 6-8は赤でレンダリングします。

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

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

cssinternet-explorer-9
15
Liam Newmarch

共有したいと思ったハッキーな回避策を考え出しました。

IE9以降は、:not()CSS疑似セレクターをサポートしています。要素に存在しない属性を使用することで、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');
}

私のtransparentdivは1回しか機能しないため、これを使用することになりました。また、HTMLで条件付きコメントを使用するのではなく、CSSを維持するのが少しすっきりしているように見えました。

編集：他の回答をサポートするために、Microsoft開発チームから この記事 開発者に条件付きコメントを使用するように勧めていることがわかりました。私のようなCSSの回避策。

16
Liam Newmarch

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; }
7
John C

これは私にとってはうまくいくようです（すべてのバージョンで完全にテストされているわけではありません）。 this ブログの説明によると、：rootセレクターはIE9でのみ使用できるため、以下のコードを記述してIE9のすべてのフィルター設定を削除できます。

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

編集：！すべての場所で機能することを確認するために重要です。

6
Anttu

条件付きコメントを使用したブラウザ/バージョンターゲティングを見てください。 IEの特定のバージョンをターゲットにして、バージョンごとにスタイリングを実装することをお勧めします。

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

5
user164226

フィルタの最も簡単で信頼性の高い方法：私が見つけた互換性はコードを使用します http://www.colorzilla.com/gradient-editor/ は以下を生成します：

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

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

条件付きコメントはまだ少しハックですが、私の意見では、ユニバーサルセレクターなどの：notやパフォーマンスのリスクはありません。

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

私もIETesterを信用しません。適切なIE9を搭載した仮想マシンを https://www.modern.ie/en-gb からダウンロードします-無料です。必要なのは時間とディスク容量だけです（元のダウンロードを保持して、期限が切れたら再インストールするだけです）。

0
William Turrell