Question

我已经被骚了好几天试图找到为什么我不能使用MS模糊＆amp;发光过滤器以在Internet Explorer中生成投影，如此页面上显示的那样：

http://kilianvalkhof.com/uploads/ieshadow.html

这里，第二个文本元素位于第一个元素下面，偏移一个位，并应用了滤镜。我的布局使用相同的技术，顶部的H1元素上有阴影，在符合标准的浏览器中显示正常，但过滤后的元素没有在IE8或IE9中显示：

http://a11.cosd.com

我的标记使用<span>，就像工作示例一样：

<h1>AREA11<span class="IEshadow">AREA11</span></h1>

除了选择器之外，

与CSS相同：

#headerContainer header h1 span.IEshadow {
  display: none;
}
.lt-ie10 #headerContainer header h1 span.IEshadow {
  display: block;
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: -1;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true');
  -ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true')";
}

但在我的布局中，过滤器根本没有应用，即使我可以看到IE8和IE9中列出的filter:属性（F12）开发人员工具。这不是我第一次在设计中使用Visual Filters，但在这种情况下，我逐字符地复制了代码。

有一件奇怪的事情：当我在IE8开发者工具中查看filter:属性时，它会显示在同一行上混合在一起的其他属性，尽管它们通常出现在IE9中，但问题仍然存在。

我已经尝试了我能想到的一切，包括从页面中禁用所有其他Javascripts并简化标记和CSS，以及避免font-face并将<span>置于IE条件注释中，如工作实例......没有变化。（我需要避免IE条件注释最终在jQuery中实现它。）

这里必须有一些非常基本的东西，为什么MS过滤器在这种情况下不起作用。我将绝对总结任何进展和如果我的布局在测试过程中发生变化，那么这里的发现。

Answer 1

这是一个z-index问题。 .IEshadow位于背景后面。

将h1一个z-index设为10，它应该有效。

#headerContainer header h1 {
    ...
    z-index: 10;
}

您可能还想更改.IEshadow

的颜色

.lt-ie10 #headerContainer header h1 span.IEshadow {
    ...
    color: #000000;
    ...
}

IE过滤器不会显示在重复的元素文本上

1 个答案: