IE 过滤器 - 阴影作用于文本；渐变+阴影作用在盒子上？

发布于 2024-10-20 22:56:20 字数 366 浏览 2 评论 0原文

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

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

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

原文

When I attach the following to a div, I get a box with a gradient and a box-shadow in IE:

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

However, when I'm doing JUST the shadow filter, I'm getting shadowing on the text inside the div. Other than the obvious (and ugly) hack of setting a filtered gradient with a constant color, how can I get a simple div to shadow itself rather than its text in all versions of IE?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绝對不後悔。 2024-10-27 22:56:20

IE 的过滤器始终是一个丑陋的黑客，很难正确使用，并且经常会导致奇怪的错误。我的建议是尽可能避免使用它们。

查看 CSS3Pie 来解决这个问题。

CSS3Pie 是针对 IE 的 hack，允许 IE 使用标准 CSS 属性而不是 filter 来处理渐变和框阴影。它还具有border-radius。

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

回复收藏 0 原文

最好是你 2024-10-27 22:56:20

在没有 CSSPie 的 IE 中，有一种方法可以实现这一点。 IE 7 和 IE 中的问题8 的问题是应用阴影的元素需要设置背景颜色。否则，阴影将由子元素（包括文本）继承。

这就是我实现跨浏览器框阴影的方法。这应该适用于 IE 7-10、所有 Chrome 和 IE 7-10。我曾经尝试过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>

There is a way to this in IE without CSSPie. The issue in IE 7 & 8 is that the element to which the shadow is applied, needs to have a background color set. Otherwise the shadow is inherited by child elements (including text).

This is how I achieve a cross browser box-shadow. This should work for IE 7-10, All Chrome & FF release that I have ever tried and Safari too. Ignore my color choices, obviously you'll need to set them to whatever works for your page.

.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');
}

Then just apply both classes to the parent element

<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>

回复收藏 0 原文

~没有更多了~