快速投影阴影CSS问题，IE8不起作用。

Question

这是一个简单的问题，这段CSS代码在IE8中无法产生阴影效果，你有什么想法为什么会出现这种情况吗？

/* Drop shadow */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);

- Dennis Martinez

---

我从未见过这样的CSS。你不能使用阴影图片吗？ - Midas

@Midas 这是CSS3的功能之一，其中一个好处是你不再需要使用图片了 :-) - andyb

我认为-ms-filter在IE8中是多余的和不必要的。你可以在这里找到这段代码：http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/ - JohnB

Answer 1

我不确定这是否是IE8的错误，但如果添加background-color，它似乎按预期工作。

在Chrome中，删除background-color会保留阴影，但在IE8中，文本继承了阴影效果，看起来很糟糕。如果您有一个实心背景，您可以匹配带有阴影的元素的背景。不幸的是，在IE8中，transparent也会导致同样的问题。

- andyb

---

您可以使用 http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ 轻松摆脱它。 - buhbang

这不是bug。如果没有背景颜色，filter: progid:DXImageTransform.Microsoft.Shadow()只会为文本创建阴影。box-shadow是用于盒子阴影的CSS3属性。因此，在IE中获得相同的效果，您必须指定一个盒子。虽然如此，这是解决问题的正确方法。+1 - JohnB

有趣的是，我正在寻找类似问题的解决方案，而删除 background-color 就是解决我的方法。得爱IE啊。 - Mahn

Answer 2

在具有阴影滤镜的元素上指定宽度解决了我遇到的类似问题。

- Media Mogul