internet-explorer - IE8 线性渐变、边界半径和不透明度

Question

我有一个 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 中我怎样才能让它们全部在同一个 div 上工作？

编辑 block 的完整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);

Answer 1

如果你与 IE8 有冲突，试试这个例子:

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

还有: 1. 设置alpha channel 透明度背景:第一个用于IE no PIE，第二个用于IE PIE，第三个用于其他 2. IE8的使用行为 3. 防止IE9使用PIE例子:

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

请记住，背景有三个声明。第一个是后备，如果 PIE 不起作用(即 Javascript 被关闭)，它将显示纯色背景。第二个是 PIE 的声明，除了使用 PIE 的 IE 之外，所有浏览器都会忽略它。第三个设置具有 alpha 透明度的背景。不支持此功能的浏览器将忽略它并使用较早的声明。

我希望这对你有帮助:)