jquery - IE 假文本阴影与其文本分开流动

Question

我一直在使用 jQuery 和 IE 过滤器在 IE<=9 中创建投影，以弥补缺少的 text-shadow 属性。这可以在页面顶部的 h2 标题中看到 on this site ，它在不支持文本阴影属性(由 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 和 IE9 的解决方法，如果有人能指出我上面的应用程序的任何问题，我会很高兴。

另外，我听说过CSS Sandpaper text-shadow实现了类似的技术，如果这是处理上述问题的可接受的最佳实践方法，我们会接受某人的认可。

Answer 1

此问题已在 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>每个元素都创建一个新的堆叠上下文。

我愿意接受其他解决方案和解释，希望这能帮助遇到同样问题的任何人。