Question

下面的图片CSS。我需要一个带有＃f2f2f2阴影的红色标题。它在Chrome和Firefox中看起来不错，但在IE中它会在每个字母的边缘显示出黑色的小文物。是否有更好的方法来制作这个影子？

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

Answer 1

您可以为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

Answer 2

为图像添加背景颜色：

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

在IE9中使用dropshadow过滤器时，如何摆脱文本上的黑色文物

2 个答案: