IE滤镜 - 阴影作用于文本；渐变+阴影作用于框？

Question

当我将以下内容附加到一个div时，在IE中会得到一个带有渐变和盒阴影的框：

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#D08080', EndColorStr='#E7A292') progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=170, Color='#B8B8B8');

然而，当我只做阴影滤镜时，我会在div内部的文本上得到阴影效果。除了明显（且丑陋）的设置带有恒定颜色的过滤渐变的hack之外，在所有版本的IE中，我如何使一个简单的div产生阴影而不是其文本？

- sscirrus

Answer 1

在不使用CSSPie的情况下，IE也有一种方法可以实现。在IE 7和8中遇到的问题是需要设置一个背景色，否则阴影会被子元素（包括文本）继承。

以下是我如何实现跨浏览器box-shadow的方法。这应该适用于我尝试过的IE 7-10，所有Chrome和FF版本以及Safari。忽略我的颜色选择，显然你需要将它们设置为适合你页面的颜色。

.wrapper {
border: solid 1px #A7A7A7;
background-color:#ffffff;/*transparent won't work*/
}

.shadow {
-moz-box-shadow: 2px 2px 3px #A7A7A7;
-webkit-box-shadow: 2px 2px 3px #A7A7A7;
box-shadow: 2px 2px 3px #A7A7A7;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7');
}

然后将这两个类应用于父元素。

<div class="wrapper shadow">
   <div id="someInnerDiv">
      <p>Some text that used to inherit the box-shadow, but doesn't anymore</p>
   strong text</div>
</div>

- hardba11

Answer 2

IE的滤镜总是一种丑陋的hack，很难正确使用，而且经常会导致奇怪的bug。我的建议是尽可能避免使用它们。

看看CSS3Pie，它提供了一个巧妙的解决方案。

CSS3Pie是针对IE的hack，它允许使用标准的CSS属性来实现渐变和盒阴影，同时也支持border-radius。

希望它能解决您的问题。

- Spudley

---

非常感谢您的回答。我之前尝试过CSS3Pie，但遇到了一个问题，即IE会在我的CSS文件中声明的每个页面上崩溃。 - sscirrus

@sscirrus - 真遗憾。我希望你已经在Pie论坛上报告了这个问题？另外，你使用的是哪个版本的Pie；现在已经更新到第三个beta版本，比之前的版本更加稳定。 - Spudley

谢谢您的建议。我会再试一下CSS3Pie。让页面在IE7和IE8上正确显示需要花费很多时间...尤其是在习惯了Chrome/FF的美丽之后，这更加令人沮丧！ - sscirrus

我刚刚使用IE 8.0访问了CSS3Pie的主页，结果浏览器崩溃了！这是我以前遇到过的同样问题。我会通知他们的。 - sscirrus