web-dev-qa-db-ja.com

背景色が存在する場合、IE8グラデーションフィルターが機能しない

次のCSSスタイルを使用しようとしています。 ie7を含むほとんどのブラウザーで動作しています。しかしie8では、透明な背景が表示されず、代わりに、残したい背景色をフォールバックカラーとして設定します。

section.rgba{
    background-color: #B4B490;
    background-color: rgba(200, 0, 104, 0.4);  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1
}

IEここで背景色をなしに設定するスタイルシート）に頼ることなくこれを機能させることができます。これは可能ですか？

誰かがそれを修正する方法を知っていますか？

internet-explorer-8filtercssgradientrgba
13
uglymunky

CSS3please をちらっと見た後、IE7/IE8グラデーションスタイルでやりすぎていることに気付きました。次のスタイルを使用するだけで十分です。

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

どうやら、-ms-filterとズームルールは必要ありません。

28
uglymunky

これを更新として追加するだけです-OPが答えを知っているのですが、IE7でそれが（「フォールバック」）が「機能」している理由を理解しようとしているときに、この質問を見つけました。 IE6/7で正常に動作していないことがわかりました...

IE8は正しいここで、IE8で（OPのコードを使用して）表示しているのは、グラデーションフィルターオーバーレイを通して表示されている背景色です。グラデーションが機能していないように見える同じ色であり、得られるのは無地の色だけだからです。それがすべてのIEで発生するはずです！

IE6と7は誤ってフォールバックを無視しています（したがって、実際にはフォールバックではありません）。透明な背景色があります。バグのため、純粋にOPにbackground-colorを使用して指定された16進数とRGBaの両方の色がある

これを回避するには多くの方法があります。参照： IE背景RGBバグ -および特に最後のコメント方法-これ回避策は、フィルター/グラデーションを使用しない場合、つまり実際にRGBa（半透明）背景のみを使用する場合にのみ適用できます。

MS "フィルター"グラデーションを使用してRGBaをシミュレートする場合、MSフィルターはIE5.5まで安定しているため、フォールバックは必要なく、background: none;はIE =ブラウザーのみ。他のブラウザーに必要なフォールバックをオーバーライドする（奇妙なハァッ！）は、元のケースではおそらく最善の解決策です-フォールバック色は、Opera（特に）＆Firefox、Safariなどの古いブラウザーバージョンでのみ必要ですそのgradients/rgbaのケースはまだサポートされていません。

9
clairesuzy

IE 7+（少なくとも私がしなければならなかった）

.widget-header {

    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-family: Verdana;
    padding: 8px;
    color: #D20074;
    border-bottom: 1px solid #6F6F6F;
    height: 100%;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #FFFFFF, #E2E2E2); 
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E2E2E2));
    /* MSIE */
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E2E2E2');
    /* Opera 11.10 + */
    background-image: -o-linear-gradient(top, #FFFFFF, #E2E2E2);
}

お役に立てれば

7
morgan_il

<a>からの要素display:inline〜display:blockフィルタースタイルが機能する前。また、最初のバイトが不透明で、次にrgbである4バイトのシーケンスで色を指定できます。 #oorrggbb.例.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;
4
user982671

Modernizrを間違って使用しています。 ModernizrはHTML要素にクラスを配置します。個々の要素ではありません。これは、IE8でSECTIONタグに色を付けるために使用したものです。

.rgba section {
    background-color: rgba(200, 0, 104, 0.4);
}
.no-rgba section {
    background-color: #B4B490;
}
.no-cssgradients section {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1;
}
2
Ryan

-ms-filterを使用できますが、-ms-filterの前にフィルターをかけると、不透明度と同じ問題が発生すると思います。

http://www.quirksmode.org/css/opacity.html その理論について

だからあなたはこのようにする必要があります：

background-color: #D5D6D7;
background-image: linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -o-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -moz-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -ms-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(213,214,215)),
    color-stop(1, rgb(251,252,252))
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D5D6D7',EndColorStr='#FBFCFC')";
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D5D6D7', endColorstr='#FBFCFC');

これは私のために働く

それに加えて、8文字の16進数コード（16進数は6のラテン文字）を持つことはできません。その上に、同じ色のグラデーションがあり、その間に異なる色を指定する必要があります。

0
Simon Dragsbæk

IE7とIE8で機能する最善の解決策は、グラデーションイメージを使用し、バックグラウンドに配置するときにrepeat-x：trueを設定することです。これは、私が見つけたすべての種類のブラウザで機能します。

0
bearcatFulton

ズームルールは、hasLayoutがトリガーされたことを確認することです。ユースケースでこれが必要ないのは、おそらくhasLayoutがすでにトリガーされているためです。

microsoftのドキュメントによると-ms-プレフィックスに関して（ http://msdn.Microsoft.com/en-us/library/ms532847（v = vs.85）.aspx 「DownlevelサポートとInternet Explorer 4.0フィルター」、「リンクできるアンカーはありません）、IE8をターゲットにするには、-ms-プレフィックスを使用し、それより前の何かをターゲットにするには、プレフィックスなしのプレフィックスを使用する必要があります。

0
seutje
#element {  
    background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, white); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, white); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(black, white); /* the standard */  
}
0
j.ghadiri