html - 使用 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 不兼容。他们使用具有方 Angular 的 activeX 控件并覆盖您可能尝试使用的任何圆 Angular 。这是一个已知错误，没有解决方法。

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

我会注意到 border-radius 无论如何只能在 IE9 向上工作，所以你的问题不适用于 IE8 或更早版本。

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

哦，它还为 IE6-8 执行 border-radius，这对您来说是一个额外的好处。 (是的，它适用于渐变)

希望对您有所帮助。