Question

在谷歌搜索和浏览我的CSS 2天后，我放弃并转向你们寻求帮助。我在CSS中创建了一个带有下拉列表的导航菜单。什么时候来IE9测试这个，显然它没有用。

下拉列表显得透明，我无法弄清楚为什么对我的生活。所有在其他浏览器中都可以正常工作，但我似乎无法找到IE无法理解的属性。

我怀疑这一部分：

nav ul ul li {
    float: none;
    border-bottom: 1px solid #b7b7b7;
    border-top: 1px solid #fff;
    position: relative;
    background: -webkit-linear-gradient(#eeeeee 0%, #d4d4d4 100%);
    background: linear-gradient(#eeeeee 0%, #d4d4d4 100%);
    background: -moz-linear-gradient(#eeeeee 0%, #d4d4d4 100%);
    background: -o-linear-gradient(#eeeeee 0%, #d4d4d4 100%);
    -moz-box-shadow: inset 2px 2px 5px #ccc;
    -webkit-box-shadow: inset 2px 2px 5px #ccc;
    box-shadow: inset 2px 2px 5px #ccc;
}

IE有可能看不到背景吗？我在这里附上小提琴：http://jsfiddle.net/VU37g/

对CSS的任何帮助或评论欢迎并提前致谢！

Answer 1

由于IE 9尚不支持渐变，因此您必须使用专有的MS滤镜属性来实现类似的效果。如果未指定background-color的值，则默认设置为transparent。

IE的语法如下：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',  endColorstr='#000000');

More info

Answer 2

要获得跨浏览器兼容性，请按照本指南

进行操作

仅适用于IE：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

http://webdesignerwall.com/tutorials/cross-browser-css-gradient

CSS中的下拉列表在IE9中显得透明

2 个答案: