在IE9中使用阴影滤镜时如何摆脱文字上的黑色伪影

下面的图像CSS。我需要一个带＃f2f2f2阴影的红色标题。它在Chrome和Firefox中看起来不错，但是在IE中它会在每个字母的边缘显示黑色的小文物。有没有更好的方法来制造这个影子？在IE9中使用阴影滤镜时如何摆脱文字上的黑色伪影

h1 { 
    color: red; 
    text-shadow: 3px 3px 0px #f2f2f2; 
    filter: progid:DXImageTransform.Microsoft.dropshadow(color=#f2f2f2, offX=3, offY=3); 
}

来源

2011-11-01 opengrid

有一个屏幕截图？我没有IE。通常情况下，我只会说优雅的退化....如果客户端不支持文本阴影对他们来说太糟糕:)我见过的大多数特定于IE的过滤器都有这样的奇怪副作用，比没有更糟糕的副作用所有的效果。 – chovy

你可以使用一个规则是这样的IE9

h1 { 
    color: red; 
    background-color: #cccccc; 
    text-shadow: 3px 3px 0px #f2f2f2; 
    filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc) 
      progid:DXImageTransform.Microsoft.dropshadow(color=#f2f2f2, offX=3, offY=3); 
}

定义背景色将防止黑色轮廓神器的发生，以及包括DXImageTransform.Microsoft.Chroma作为过滤器的一部分将使具有该颜色的元素透明。不要选择与任何内容颜色相匹配的背景颜色很重要，否则这也会变得透明。

Source

来源

2012-08-29 22:10:10 jackofallcode

太棒了！ Tnx :) – Johan

这就是答案。这样一个伟大的黑客攻击并解决IE9中的一个永远不会修复的隐藏的BUG。 – DWoldrich

添加背景颜色的图像：

.logo-images-panel img { 
    margin-left: 20px; 
    // added.. 
    background-color: #FFF; 
}

来源

2012-09-19 12:55:58 mmcglynn

在IE9中使用阴影滤镜时如何摆脱文字上的黑色伪影

回答

相关问题