background - Mozilla 中的文本阴影和背景剪辑 css

Question

我对 css 插入文本阴影效果的跨浏览器兼容性有疑问。具体来说，我遇到了 Mozilla 的问题。这是代码:

我有一个包含各种内部元素的容器:

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

应用于它的是以下样式规则:

#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;

}

跨度在 Safari 和 Chrome 中显示为我希望的样子:

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

不幸的是，这是在 Mozilla 中显示的内容:

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

我使用 modernizr 测试了 text-shadow 和 background-clip:这两个属性都存在并且在 Mozilla 中起作用，这使我无法编写仅在属性存在时才插入样式的 javascript。换句话说，我已将此排除在外。

我还能如何解决这个问题？我应该尝试其他检测和回退方法吗？有没有简单的 css 解决方案(请说是)？任何帮助、建议或意见将不胜感激。谢谢。

Answer 1

我找到了我的问题的解决方案。

首先，将以下测试添加到 Modernizr:

`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;
    });
});`

这不仅测试浏览器中存在 background-clip 属性，而且测试文本值作为可理解的值存在。然后，如果浏览器兼容，则 bool 值 Modernizr.backgroundcliptext 为真。我写了这样的东西:

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 设置为黑色，没有背景颜色，也没有背景剪辑或文本阴影)

虽然我想出了一个间接解决这个问题的方法，但我希望很快就会有一种方法可以在没有背景剪辑的情况下给浏览器打补丁:文本值理解。如果您在这方面有任何消息，请发表评论。谢谢。