IE поддельные текстовые теневые потоки отдельно от его текста

Question

Я использовал фильтры jQuery и IE для создания тени в IE < = 9, чтобы восполнить недостающее свойство text-shadow. Это можно увидеть в топ-оф-страницы h2 заголовков on this site, который использует JQuery в браузерах, которые не поддерживают свойство текста тени (обнаруженную modernizr), чтобы скопировать текст внутри элемента 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 реализует подобную технику и согласился бы с одобрением кого-то, если это признанный наилучший способ решения этой проблемы.

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(){ 

и объявления ding this CSS:

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

Я все еще не уверен, почему (2) необходимо (или достаточно). Есть некоторые подсказки на странице дизайна для jQuery Textshadow (этот плагин был согласован как лучшее решение, чтобы ответить на часть исходного вопроса). В двух разделах для Glow и Blur описаны корректировки, которые должны быть сделаны для позиционирования элемента, а также вложенные элементы <span>, каждый из которых создает новый контекст стекирования.

Я был бы открыт для других решений & объяснения и надеюсь, что это поможет любому, у кого такая же проблема.