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属性，还测试文本值是否为理解值。然后，如果浏览器兼容，则布尔值Modernizr.backgroundcliptext为true。我写了这样的话：

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

虽然我想出了这个问题的间接解决方案，但我希望很快就能找到一种方法来修补浏览器，而不需要了解background-clip：text值。如果你在这方面有任何新闻，请评论。谢谢。

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

1 个答案: