IE 가짜 텍스트 그림자가 텍스트와 별도로 흐릅니다.

Question

누락 된 text-shadow 속성을 보완하기 위해 jQuery 및 IE 필터를 사용하여 IE < = 9에 그림자를 만들었습니다. 이것은 ... h2 요소 내부의 텍스트를 복제 (modernizr 감지) text-shadow 기능을 지원하지 않는 브라우저에 jQuery를 사용하여 상단의 페이지 h2 제목 on this site에서 볼 수 있습니다

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. 나는 비슷한 기술을 구현하고 위의 문제를 다루는 가장 좋은 연습 방법이라면 누군가의 보증을 수락한다고 들었습니다.

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> 요소를 설명합니다.

나는 다른 솔루션 & 설명이 열려 있고 동일한 문제가있는 사람에게 도움이되기를 바랍니다.