IE fake text-shadow 与其文本分开流动答案

【问题标题】：IE fake text-shadow flows separately from its textIE fake text-shadow 与其文本分开流动
【发布时间】：2013-03-07 05:02:02
【问题描述】：

我一直在使用 jQuery 和 IE 过滤器在 IEtext-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 和 IE9 的解决方法感到满意，因为如果有人能指出我上面的应用程序的任何问题，我会很高兴。

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

【问题讨论】：

标签： jquery html css internet-explorer polyfills

【解决方案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> 元素，每个元素都会创建一个新的堆叠上下文。

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

【讨论】：