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

Question

我有这段代码可以在图像上投下阴影：

.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

元素需要有布局（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 2

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

.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 和 8（我没有 6）。

Answer 3

在 CSS 属性中使用冒号绝对是不正确的。处理这些 DX 过滤器的正确方法似乎是一个下划线：

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