0

線形グラデーション、境界半径、および不透明度を持つ div があります。これは ie9+、ff、chrome などで動作します。

しかし、IE8には問題があります（css3pieを使用）：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#40000000", endColorstr="#40FFFFFF",GradientType=1 );
これはグラデーションと不透明度を取得しますが、無視しますborder-radius: 0 0 100% 0;

パイの背景を使用する
-pie-background: linear-gradient(right, #cce6f5 21%, '.$block_color.' 110%);
と、線形グラデーションが機能し、境界線の半径が機能しますが、不透明度が機能しません。私が試した： 

opacity:0.4 // not supported in IE8
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);

上記のいずれも機能しません。

IE 8 で 3 つすべてを同じ div で動作させるにはどうすればよいですか?

ブロックの完全な CSS を 編集します。

width: 204px;
height: 87px;
margin-top: 20px;

opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);

-o-border-bottom-right-radius: 100%; /* Opera */
-webkit-border-bottom-right-radius: 100%;
-moz-border-radius-bottomright: 100%;
border-radius:0 0 100% 0;

position:relative;
z-index:1;

background-image: linear-gradient(right, #cce6f5 21%, '.$block_color.' 110%);
background-image: -o-linear-gradient(right , #cce6f5 21%, '.$block_color.' 110%);
background-image: -moz-linear-gradient(right , #cce6f5 21%, '.$block_color.' 110%);
background-image: -webkit-linear-gradient(right , #cce6f5 21%, '.$block_color.' 110%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#40'.$ms_block_color.'",endColorstr="#40CCE6F5",GradientType=1 );
zoom:1;
background-image: -webkit-gradient(
  linear,
  right ,
  left ,
  color-stop(0.21, #cce6f5),
  color-stop(0.80, '.$block_color.')
);
behavior: url(/includes/PIE.htc);
4

1 に答える 1

2

IE8 と競合している場合は、次の例を試してください。

.div {
background:rgb(0,0,0);
background:rgba(0,0,0,0.4);
-pie-background:rgba(0,0,0,0.4);
}

また: 1. アルファ チャンネルの透過性を使用して背景を設定します: 1 番目は IE なしの PIE、2 番目は IE PIE の場合、3 番目はその他の場合 2. IE8 の動作を使用します 3. PIE を使用して IE9 を防止します 例:

:root *> .div {
  behavior: none;
}

背景には 3 つの宣言があることに注意してください。1 つ目は、PIE が機能しない (つまり、Javascript がオフになっている) 場合に無地の背景色を表示するフォールバックです。2 つ目は、PIE を使用する IE 以外のすべてのブラウザーで無視される PIE の宣言です。3 番目は、アルファ透明度で背景を設定します。これをサポートしていないブラウザーはそれを無視し、以前の宣言を使用します。

これがあなたを助けることを願っています:)

于 2013-02-21T16:26:55.553 に答える