css - 向元素添加渐变会破坏 IE 中的 CSS 功能

Question

我正在开发一个基于 CSS 的下拉菜单。在我向元素添加渐变之前，它工作正常。比 IE 中的某些东西中断，当我将鼠标悬停<li>在子菜单中的项目上时，菜单框就会消失。

这是我用来添加渐变并使其跨浏览器兼容的代码：

background-color: #c1ddf4; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c1ddf4', endColorstr='#ffffff', GradientType=0); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1ddf4), color-stop(100%, #ffffff));/* for webkit browsers */
background: -moz-linear-gradient(top, #c1ddf4, #ffffff); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#c1ddf4, #ffffff);

请参阅以下示例：

OK （无渐变）与NOT OK （有渐变）

Answer 1

IE 过滤器在应用于元素时会破坏某些功能。我的建议是为 IE 使用水平平铺的渐变图像，或者使用 CSS hack、仅限 IE 的样式表，或者使用Modernizr.js来定位它。

真正正确的方法是使用 Modernizr，然后编写这个 CSS：

.no-cssgradients li {
     background: url(gradient.png) repeat-y;
}

这样，任何不支持 CSS 渐变的浏览器（不仅仅是 IE）都将获得图像。