IE 용 텍스트 그림자

Question

웹 사이트를 만들고 텍스트 그림자 기능을 사용하고 있지만 IE에서는 작동하지 않습니다.

그래픽 :

text-shadow: 0.1em 0.1em 0.2em black; 

어떤 솔루션이 있습니까 이상이 와서 해킹하거나, IE의 텍스트 그림자 기능을 모방 뭔가.

Answer 1

IE의 일부 버전의 경우의 DropShadow 필터는 당신이 필요로하는 일을 할 수 있습니다 : 나는 배경 이미지에 중첩 할 때 작동하는 크로스 브라우저 텍스트 스트로크 솔루션을 찾고있었습니다

http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx

Answer 2

. 나는 IE7-9 (나는 6을 테스트하지 않았 음)에서 작동하고, 앨리어싱 문제를 야기하지 않는 여분의 마크 업, js 및 작업을 포함하지 않는 해결책이 있다고 생각한다.

이것은 CSS3 텍스트 섀도우 인 which has good support except IE을 사용한 다음 IE 용 필터 조합을 사용하여 조합 한 것입니다. 현재로서는 CSS3 텍스트 스트로크 지원이 좋지 않습니다.

IE 필터 :

글로우 필터 looks terrible, 그래서 나는 그것을 사용하지 않았다.

David Hewitt's answer 방향 조합으로 드롭 섀도우 필터 추가. 그런 다음 ClearType이 제거되어 불필요한 앨리어싱 된 텍스트로 끝납니다.

그런 다음 useragentman에 제안 된 요소 중 일부를 드롭 섀도우 필터와 결합했습니다.

이 예제는 흰색 스트로크와 검은 색 텍스트가 될 것입니다 함께

퍼팅. IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)를 대상으로하는 방식으로 조건부 HTML 클래스를 사용하고 있습니다.

#myelement { 
    color: #000000; 
    text-shadow: 
    -1px -1px 0 #ffffff, 
    1px -1px 0 #ffffff, 
    -1px 1px 0 #ffffff, 
    1px 1px 0 #ffffff; 
} 

html.ie7 #myelement, 
html.ie8 #myelement, 
html.ie9 #myelement { 
    background-color: white; 
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1); 
    zoom: 1; 
} 

Answer 3

IE 필터 클래스는 사용자가 보유한 배경 이미지에도 그림자를 둡니다. 예를 들어 배경의 일부로 줄이있는 H1 태그가 있는데 IE 텍스트 그림자 필터를 놓으면 배경의 선은 그 그림자를 상속합니다.

Answer 4

나는이 문제를 지금도 조사하고 있으며 IE10에서 내 사이트를 테스트하는 동안 모순 된 발견을 공유하고 싶습니다.

<p>Meer info op onze <a class="links" target="_self" href="/leden">ledenpagina</a></p> 

하는 CSS와 결합 :

p { display: inline-table; 
    color: #FFF; 
    text-shadow: 0px 1px 2px #111, 0px 1px 0px #111; 
    margin: 0px 20px; } 

a.links { 
    text-decoration: underline; 
    color: #FFFF60; 
    font-size: 1.1em; } 

내가 IE10이의 결과에서 볼 경우, achor 텍스트 "ledenpagina"는 텍스트 -를 수신하지

나는이 html 구조 부모 (p 태그)에 정의 된 그림자 스타일. 가정이 결합 된 텍스트 장식 할 아무것도 할 수 :

결과는 여기에서 목격 할 수 있습니다합니다 (p 태그에 또한 텍스트 장식을 적용하여 테스트) 선택이 거짓 밑줄 : 헤더 슬라이더 아래 http://tczelem.be (슬라이드 탭)

그래서 텍스트 장식 선택기는 IE10에서 약간의 효과가있는 것 같습니다.

! [2]