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 (without gradient)与NOT OK (with gradient)

Answer 1

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

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

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

这样，任何不支持CSS渐变（不仅仅是IE）的浏览器都会为图像提供服务。

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

1 个答案: