Question

我有这个代码在imagese上投下阴影：

.shadow{
box-shadow: -2px 2px 4px #666;
-webkit-box-shadow: -2px 2px 4px #666;
-moz-box-shadow: -2px 2px 4px #666;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);
}

这适用于FF，Opera，Safari，Chrome但不适用于IE6（尚未测试任何其他IE版本）

由于

更新：

 <img src="......" class="shadow">

没有指定宽度或高度......

问题在于阴影是清晰的，完全是黑色的，而不是像阴影那样褪色，就像在FF中一样。难以描述......阴影在那里，但它没有褪色，就像图像背后的黑框一样。

Answer 1

在CSS属性中使用冒号肯定是不正确的。解决这些DX过滤器的正确方法似乎是一个下划线：

filter: progid_DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);

Answer 2

元素需要布局（from MSDN）：

几乎任何对象都可以应用过滤器。但是，应用滤镜的对象必须具有布局才能显示滤镜效果。简而言之，具有布局意味着对象具有定义的高度和宽度。某些对象（如表单控件）默认具有布局。所有其他可过滤对象通过设置height或width属性，将position属性设置为absolute，将writingMode属性设置为tb-rl或将contentEditable属性设置为true来获得布局。

另请参阅On having layout了解详情。

另请注意，filter语法仅适用于IE6和IE7。 IE8 needs the -ms-filter property instead, and its value should be in quotes

简而言之，为了使它在IE6中工作，添加zoom: 1，并使其在IE8中工作，添加-ms-filter属性（在filter属性之前！）：

.shadow {
    box-shadow: -2px 2px 4px #666;
    -webkit-box-shadow: -2px 2px 4px #666;
    -moz-box-shadow: -2px 2px 4px #666;
    -ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true)";
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);
    zoom: 1;
}

Answer 3

使用类似的东西并根据您的需要进行更改：

.shadow{
box-shadow: -2px 2px 4px #666;
-webkit-box-shadow: -2px 2px 4px #666;
-moz-box-shadow: -2px 2px 4px #666;
cursor:hand;
height:160px; 
padding:10px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=-2, OffY=2,  Color=#666, Positive='true');
}

它适用于ie7＆amp; 8（我没有6）。

有什么方法可以让这个css在大多数IE版本中运行？

3 个答案: