3

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

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

但是，当我只使用阴影过滤器时，我会在 div 内的文本上产生阴影。除了设置具有恒定颜色的过滤渐变的明显（和丑陋）黑客之外，如何在所有版本的 IE 中获得一个简单的 div 来阴影自身而不是其文本？

4

2 回答 2

2

IE 的过滤器总是一个丑陋的 hack，很难正确处理，而且经常会导致奇怪的错误。我的建议是尽可能避免使用它们。

看看CSS3Pie以找到解决这个问题的巧妙方法。

CSS3Pie 是 IE 的一个 hack，它允许它使用标准 CSS 属性而不是filter渐变和框阴影。它也可以border-radius。

我希望它能解决你的问题。

于 2011-03-10T10:11:02.123 回答
2

在没有 CSSPie 的 IE 中有一种方法。IE 7 & 8 中的问题是应用阴影的元素需要设置背景颜色。否则阴影会被子元素（包括文本）继承。

这就是我实现跨浏览器框阴影的方式。这应该适用于 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>
于 2013-03-15T04:15:24.560 回答