0

几天来，我一直在苦苦寻找为什么我不能使用 MS 模糊和发光滤镜在 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')";
}

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

一件奇怪的事情：当我filter:在 IE8 开发人员工具中查看该属性时，它显示其他属性集中在同一行，尽管它们在 IE9 中正常显示，但问题仍然存在。

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

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

4

1 回答 1

1

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

给你10h1分z-index，它应该可以工作。

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

您可能还想更改颜色.IEshadow 

.lt-ie10 #headerContainer header h1 span.IEshadow {
    ...
    color: #000000;
    ...
}
于 2013-01-07T03:19:48.467 回答