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

我已经被折磨了好几天，试图找出为什么我不能使用MS blur&glow过滤器在Internet Explorer中生成阴影，如本页所示：

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

我的标记使用了一个

，如工作示例所示：

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

但是在我的布局中，过滤器根本不被应用，即使我可以看到

过滤器：

属性在IE8和IE9中使用（F12）开发工具列出。这不是我第一次在设计中使用视觉过滤器，但在本例中，我已经一个字符一个字符地复制了代码

一件奇怪的事：当我在IE8开发者工具中查看

过滤器：

属性时，它显示了集中在同一行的其他属性，尽管它们通常出现在IE9中，问题仍然存在

我已经尝试了我能想象到的一切，包括从页面禁用所有其他Java脚本，简化标记和CSS，以及避免使用

字体

，并将

放在IE条件注释中，如工作示例中所示。。。没有变化。（我需要避免IE条件注释，以便最终在jQuery中实现这一点。）

---

关于MS过滤器在这种情况下无法工作的原因，我在这里肯定缺少一些非常基本的东西。如果我的布局在测试过程中发生了变化，我绝对会在这里总结任何进展和发现。

这是一个

z-index

问题。

.IEshadow

位于背景后面

给你的

h1

一个

z-index

值为10，它应该可以工作

#头容器头h1{
...
z指数：10；
}

您可能还需要更改

.IEshadow

.lt-ie10#封头容器封头h1 span.IEshadow{
...
颜色：#000000；
...
}

我明白了。如果示例页面上有背景，那么这在该页面中也是一个问题。在我的例子中，有一个背景，没有任何东西可以建立一个新的背景，它的z索引为0。因此，重复的元素显示在其后面。非常感谢你。您也对了，阴影颜色是从元素本身获取的，而不是从过滤器的

Color=

参数获取的，使用黑色看起来更好。祝你长寿，繁荣昌盛！

#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')";
}