Mozilla의 텍스트 그림자 및 배경 클립 CSS

Question

css 삽입 텍스트 그림자 효과의 브라우저 간 호환성 문제가 있습니다. 특히 모질라에 문제가 있습니다.

나는 다양한 내부 요소와 컨테이너가 : 유행에 따라 디자인하는 규칙을 따르고 있습니다 적용된

<div id='abstract'> 
    <span>Abstract</span> 
</div> 

:

내가 IN에 원하는

#abstract span { 
    font-family : 'FuturaLT Heavy'; 
    font-size : 21px; 
    line-height : 24px; 
    text-transform : uppercase; 
    color : transparent; 
    background-color : #565656; 
    text-shadow : 0px 2px 3px rgba(255, 255, 255, 0.5); 
    -webkit-background-clip : text; 
     -moz-background-clip : text; 
      background-clip : text; 

} 

스팬가 나타납니다을 여기에 코드입니다 사파리와 크롬 :

http://harrysolovay.com/non_site_related/images/stackoverflow/1.png

Unfortuna tely, 이것은 모질라에 표시됩니다 무엇 :

http://harrysolovay.com/non_site_related/images/stackoverflow/2.png

내가 텍스트 그림자와 배경 클립 모두를 테스트하는 모더 나이저를 사용 : 두 속성이 작성 자바 스크립트에서 저를 유지하는 존재와 모질라에서 작동하는지 속성이있는 경우에만 스타일을 삽입합니다. 다른 말로하면, 나는 이것을 해결책으로 내 세웠다.

그 밖의 방법으로이 문제를 해결할 수 있습니까? 시도해야 할 다른 탐지 및 대체 방법이 있습니까? 간단한 CSS 솔루션이 있습니까 (예라고 말하십시오)? 도움, 제안 또는 의견은 크게 감사하겠습니다. 고맙습니다.

Answer 1

내 질문에 대한 해결책을 찾았습니다.

첫째, 모더 나이저에 다음 테스트를 추가 :이뿐만 아니라 배경 클립 속성은 브라우저에 있는지, 또한 텍스트 값이 이해 값으로 존재하는지 테스트

`Modernizr.addTest('backgroundcliptext', function() { 
    var div = document.createElement('div'); 
    div.style.webkitBackgroundClip = "text"; 
    var text = div.style.cssText.indexOf('text'); 
    if (text > 0) return true; 
    'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){ 
     if (val+'BackgroundClip' in div.style) return true; 
    }); 
});` 

. 그런 다음 브라우저가 호환되면 부울 Modernizr.backgroundcliptext가 true입니다. I는 다음과 같이 썼다 :

if(Modernizr.backgroundcliptext) { 
    $('#abstract > span').css({ 
     'color' : 'transparent', 
     'background-color' : '#565656', 
     'text-shadow' : '0px 2px 3px rgba(255, 255, 255, 0.5)', 
     '-webkit-background-clip' : 'text', 
      '-moz-background-clip' : 'text', 
       'background-clip' : 'text' 
    }); 
} 

내가 간접적 함께했다하지만

(텍스트 CSS는 검은 색, 아니 배경색 및 배경 없음 클립 또는 텍스트 그림자를 설정하여) 이 문제에 대한 해결책으로, 배경 클립없이 브라우저에 패치를 적용하는 방법이 곧 있기를 바랍니다. 텍스트 가치 이해입니다. 이 정면에 뉴스가 있다면 의견을 말하십시오. 고맙습니다.