13

次の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
}

背景色をnoneに設定するIEスタイルシートに頼ることなく、これを機能させたいと思います。これは可能ですか？

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

4

9 に答える 9

28

CSS3を一瞥した後、IE7/IE8のグラデーションスタイルでやり過ぎていることに気づきました。次のスタイルを使用するだけで機能します。

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

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

于 2011-02-07T11:08:55.477 に答える
9

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

IE8はここにあり、IE8で（OPのコードで）表示されているのは、グラデーションフィルターオーバーレイを通して表示される背景色です。同じ色であるため、グラデーションが機能していないように見えます。取得しているのは無地です。それがすべてのIEで起こるべきことです！

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

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

If using MS "filter" Gradients to simulate RGBa, The MS filters are stable back to IE5.5 so the reality is that they don't need a fallback and background: none; fed to IE only browsers, to override the fallback required for other browsers (weird huh!) is likely the best solution in the original case - A fallback colour is only necessary for older browser versions of Opera(especially) & Firefox, Safari et al in the case of their gradients/rgba not yet being supported.

于 2011-06-09T23:30:06.690 に答える
7

It appears, you have to put either width or height to DIV CSS for gradient to work in IE 7+ ( at least I had to )

.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);
}

Hope this helps

于 2011-11-08T13:17:53.957 に答える
4

I found I had to change the <a> element from display:inline to display:block before the filter style would work. Also, the color can be specified with a 4-byte sequence where the first byte is opacity, then rgb, ie. #oorrggbb. Eg.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;
于 2012-11-14T18:24:50.797 に答える
2

モデナイザーを間違って使用しています。Modernizerは、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;
}
于 2011-01-24T19:25:53.633 に答える
0 
#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 */  
}
于 2012-04-09T05:45:23.083 に答える
0

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

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

于 2011-05-05T22:15:30.423 に答える
0

The best solution that works for IE7 and IE8 is to use a gradient image and set repeat-x: true while putting it in the background. This works for all browser types that I have found.

于 2013-03-26T17:34:44.317 に答える
0

you can use the -ms-filter but i guess its the same issue as opacity if you do filter before -ms-filter it fails se more at:

http://www.quirksmode.org/css/opacity.html for that theory

so you need to do like this: 

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');

this works for me

besides that you cant have a 8 char hexcode (hex is latin for six) and on top of this you have the same color to gradient between you have to have different colors

于 2013-10-09T14:01:10.613 に答える