使用IE过滤器进行背景渐变

Question

我在CSS中使用此属性为IE创建渐变。

.icons,
#nav {
filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#9e9ccf', endColorstr='#423f88', GradientType=0 ); /* IE6-9 */
}

应用此功能后，我可以看到漂亮的渐变效果。但是，我的图标不再应用border-radius，我的#nav z-index失败，我的子菜单无法按预期加载，并根据#nav高度和宽度进行剪裁。在所有IE中。

Answer 1

IE旧的专有filter样式与border-radius不兼容。它们使用具有方角的activeX控件，并覆盖您可能尝试使用的任何圆角。这是一个已知的错误，没有解决方法。

filter作为activeX控件的另一个问题是它带有activeX控件所具有的所有错误和怪癖。这包括弄乱分层，以及其他有趣的东西。我的建议是不惜一切代价避免使用filter。

我会注意到border-radius仅适用于IE9向上，所以你的问题不适用于IE8或更早版本。

解决方案：我建议您试试CSS3Pie。这是一个插入IE6 - IE9的javascript库，并为这些浏览器提供了对标准CSS3渐变的更好支持。它使用VML图形，因此不需要使用filter，因此没有filter渐变可能导致的错误。 （它确实有一些自己的怪癖，但它们相比之下很小，很容易解决，并在CSS3Pie网站上有详细记录）。另一个好处是它允许您为所有浏览器使用标准CSS代码，包括旧的IE版本。大赢。

哦，IE6-8也有border-radius，这对你来说是一个额外的好处。 （是的，它适用于渐变）

希望有所帮助。