Question

我正在测试带圆角的半透明背景（CSS在HTML中）：

http://www.lucagiorcelli.it/test/milanificio_boxes/

它们在IE10中很好（见截图：http://o7.no/KSvX2b）。但它们在IE9中更暗，角上有鬼（见截图：http://o7.no/KSw9P2）。

我的CSS出了什么问题？

.yellowAlpha35 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(245, 221, 183);
filter:alpha(opacity=35);
/* RGBa with 0.6 opacity */
background: rgba(241, 144, 28, 0.35);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#23000000, endColorstr=#23000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#23000000, endColorstr=#23000000)";
}

Answer 1

据我所知，-ms-filter仍在IE9中运行，它只是被标记为已弃用。因此，在IE9中，您可以获得rgba（）+ IE8所需的渐变背景。

要解决此问题，您可以为IE8，IE9等创建单独的CSS文件，或者只使用CSS hack。例如：root是在IE9中引入的，所以你可以使用

:root .yellowAlpha35 {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

这比准备多个CSS文件和添加条件注释更容易，除非你有更多的IE版本特定规则。

Answer 2

正如Rafaei所说，ms-filter仍在IE9中运行，它只是标记为已弃用。为避免这种情况发生，请使用基于浏览器的多个css填充。这样你就可以将-ms-filter部分留给IE9 +，并且仍然可以在IE 8中使用它。这样：

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

<!--[if !(IE 8)]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->

更多信息link

Answer 3

我假设你对浏览器进行了酸性测试？

http://www.acidtests.org/

CSS：我在IE9中得到了一个更暗的半透明背景。为什么？

3 个答案: