0

我一直在使用 jQuery 和 IE 过滤器在 IE<=9 中创建阴影，以弥补缺失的text-shadow属性。这可以在此站点h2的页面顶部标题中看到，它在不支持 text-shadow 属性（由 检测）的浏览器上使用 jQuery 来复制元素内的文本...modernizrh2

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 投影技术提供）：

@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 的解决方法，如果有人可以指出我上面的应用程序的任何问题，我会很高兴。

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

4

1 回答 1

0

这个问题已在 SitePoint 上的这个线程中重新表述和讨论。现在通过以下两个更改在上面列出的实时站点上解决了该问题：

1) To keep the line length the same, a right padding must be added to the superimposed (shadow) element that matches the left positioning offset, as in:

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

2) The superimposed (shadow) <span> must be moved inside the <a> and given a new stacking context, by changing the jQuery selector above to:

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

and adding this CSS:

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

I am still uncertain why (2) is necessary (or sufficient). There are some clues on the design page for jQuery Textshadow (this plugin was agreed to be a best-practice solution, to answer part of the original question). The two sections for Glow and Blur describe adjustments that must be made to element positioning, as well as nested <span> elements each creating a new stacking context.

I would be open to other solutions & explanations and hope this helps anyone having the same problem.

于 2013-04-06T22:11:09.250 回答