Question

我一直在使用jQuery和IE过滤器在IE＆lt; = 9中创建一个投影，以弥补缺少的text-shadow属性。这可以在页面顶部h2标题on this site中看到，它在不支持text-shadow属性（由modernizr检测到）的浏览器上使用jQuery来复制h2元素内的文字......

jQuery(".no-textshadow h1, .no-textshadow h2").each(function(){
  var text_shadow_markup = jQuery(this).html();
  jQuery(this).append("<span class='shadow'>"+text_shadow_markup+"</span>");
});

...使用此CSS设置样式（由IE drop shadow technique提供）：

@media only screen and (min-width: 768px) {
  h2 {
    text-shadow: #000000 0px 5px 5px;
    position: relative;
    zoom: 1;
    z-index: 1;
  }
  h2 span.shadow {
    color: #000000;
    position: absolute;
    left: -7px;
    top: -2px;
    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中看到此内容。

如果阴影span绝对位于h2元素的包含框中，我不明白这是怎么发生的。然而，他们能够流动，好像他们没有连接。我意识到这可能是一个浏览器错误，因此很高兴支持IE8＆amp; amp; IE9，就像有人可以指出我上面的应用程序有任何问题一样。

p p。，我听说CSS Sandpaper text-shadow实施了类似的技术，并且如果这是处理上述问题的最佳实践方式，则会接受某人的认可。

Answer 1

这个问题已经改写了＆amp;在this thread on SitePoint中讨论过。现在通过以下两个更改在上面列出的实际站点上解决了该问题：

1）为了保持线长相同，必须在与左定位偏移匹配的叠加（阴影）元素上添加右边距，如下所示：

h2 span.shadow { ...
  left: -7px;
  padding-right: 7px; ...

2）叠加的（阴影）<span>必须在<a>内移动并给出一个新的堆叠上下文，方法是将上面的jQuery选择器更改为：

jQuery(".no-textshadow h1 a, .no-textshadow h2 a").each(function(){

并添加此CSS：

h2 a {
  display: block;
  zoom: 1.0;
  position: relative;
}

我仍然不确定为什么（2）是必要的（或足够的）。 jQuery Textshadow的设计页面上有一些线索（这个插件被认为是最佳实践解决方案，可以回答部分原始问题）。 Glow和Blur的两个部分描述了必须对元素定位进行的调整，以及每个创建新堆叠上下文的嵌套<span>元素。

我愿意接受其他解决方案＆amp;解释并希望这有助于任何人遇到同样的问题。

IE假文本阴影与其文本分开

1 个答案: