IE过滤器 - 阴影作用于文本;渐变+阴影在框中起作用？

当我附上下面以一个div，我得到一个箱子，在IE浏览器梯度和箱阴影：IE过滤器 - 阴影作用于文本;渐变+阴影在框中起作用？

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

然而，当我做的只是阴影过滤器，我越来越阴影在div内的文字上。除了使用常量颜色设置过滤渐变的明显（和丑陋的）破解之外，我怎样才能在所有版本的IE中获得简单的div来隐藏自己而不是其文本？

来源

2011-03-10 sscirrus

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

看一看CSS3Pie是否可以很好地解决问题。

CSS3Pie是IE的一种黑客技术，它允许使用标准CSS属性而不是filter作为渐变和框阴影。它也是border-radius。

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

来源

2011-03-10 10:11:02 Spudley

非常感谢您的回答。我曾经尝试过CSS3Pie，但是我遇到了一个问题，那就是IE会在我的CSS文件中声明的每个页面上崩溃。 – sscirrus 2011-03-10 10:35:45

@sscirrus - 真遗憾。我希望你报告它是一个馅饼论坛上的错误？另外，你使用的是什么版本的Pie;它现在已经达到了第三个beta版本，并且比以前的版本更加稳定。 – Spudley 2011-03-10 10:54:35

感谢您的建议。我会给CSS3Pie另一个尝试。在IE7和IE8上正确显示内容需要花费很多时间......在习惯了Chrome/FF的美妙之后，尤其令人沮丧！ – sscirrus 2011-03-10 11:38:53

在没有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-15 04:15:24 hardba11

IE过滤器 - 阴影作用于文本;渐变+阴影在框中起作用？

回答

相关问题