Question

我正在为IE8进行跨浏览器修复，我遇到了一些我以前从未见过的东西。有人曾经见过这个疯狂的阴影吗？是否有人知道可能导致这种情况的原因？

我附上两个截图，一个来自IE8，一个来自Chrome。

IE8 - http://cl.ly/image/1u0t0A2D0p0l Chrome - http://cl.ly/image/411L1B0Y2X3Y

感谢您提供任何帮助！

在此处查看HTML和CSS：http://marcusfriberg.com/skillbird/stof.html

Answer 1

IE8不支持CSS中的text-shadow，这就是Chrome和IE似乎在这里使用的内容。

http://caniuse.com/css-textshadow

如果这是您继承的代码，那么很可能有人试图使用IE的替代方法，这是非常错误的。

IE有许多回退的想法，但一个流行的想法是使用IE过滤器＆＃39;。

有时这些适当的IE过滤器可以达到与标准CSS类似的效果，但在其他时候，它们需要微调。

您可能希望扫描CSS文件以使用过滤器并根据需要进行调整。代码看起来类似于：

#element {  
    filter: alpha(opacity=70); /* the opacity won't work! */  
    filter: glow(color=black,strength=5);  
}

有关更多信息，请参阅此文章：

http://www.impressivewebs.com/css3-text-shadow-ie/

为了在IE中实现更好的文本阴影效果，我使用CSS Pie。太棒了。在这里查看：

http://css3pie.com/

它现在甚至在我的客户的某个网站上使用：http://www.tokheim.com

希望有所帮助。

Answer 2

这个问题不仅发生在IE8中，也发生在IE9中。当我通过开发人员工具查看时，由于filter和post-top类中提供的属性stats-type，它清楚地表明它正在发生。我建议你使用条件css 来克服这个问题。请仔细查看此link（社区添加），以便清楚了解{IE浏览器中filter的行为。

修改：

而且在MDN中，IE浏览器没有记录filter属性。 Check compatibility section。它还说明了

Windows Internet Explorer浏览器的旧版本（4.0到9.0）支持已弃用的非标准“过滤器”。

可以在此link找到与IE浏览器兼容的其他filter属性（不适用于IE9）。

Answer 3

截至此website：

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

“第一个值指定水平距离，第二个值指定阴影的垂直距离。第三个值指定模糊半径，最后一个值描述阴影的颜色。”

这意味着Y轴的滤镜值太大。

是什么导致了这个疯狂的阴影？

3 个答案: