IE假文字陰影流程與其文字分開

我一直使用jQuery和IE過濾器在IE中創建陰影效果< = 9，以彌補缺失的text-shadow屬性。這可以在頂級頁h2標題on this site，這在不支持text-shadow屬性（由modernizr檢測）來複制h2元素中的文本瀏覽器使用jQuery的可以看出...IE假文字陰影流程與其文字分開

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元素的包含框中會發生這種情況。然而，他們能夠流動，就好像他們是獨立的。我意識到這可能是一個瀏覽器錯誤，因此會很滿意IE9的支持IE8 &的解決方法，因爲如果有人可以指出我的應用程序上面有任何問題。

p.s.，我聽說CSS Sandpaper text-shadow實現了類似的技術，並會接受某人的認可，如果這是一個接受的最佳實踐方式來處理上述問題。

來源

2013-03-18 rphair

此問題已被更改&在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的兩個部分描述了必須對元素定位進行的調整，以及嵌套的每個元素創建一個新的堆疊上下文。

我會對其他解決方案開放&解釋並希望這可以幫助任何人有同樣的問題。

來源

2013-04-06 22:11:09 rphair

IE假文字陰影流程與其文字分開

回答

相關問題