使用 chrome 和 firefox 10.2 的结果完全不同答案

【问题标题】：result totally different using chrome and firefox 10.2使用 chrome 和 firefox 10.2 的结果完全不同
【发布时间】：2012-03-26 03:08:29
【问题描述】：

我创建了这个文字效果：

.inset-text
{
    background-color: #666666;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0 3px 3px;          
}

<p class="inset-text">Some Text</p>

不幸的是，如果您尝试使用 Firefox 运行此示例，您会在 Chrome 中看到一个灰色矩形，一切正常。我该如何解决这个问题？

【问题讨论】：

标签： html css browser cross-browser

【解决方案1】：

你确定background-clip 可以取值text 吗？在w3schools 或Mozilla Developer Network 中我没有看到这个列表。顺便说一句，Firefox 现在也只接受 background-clip。

【讨论】：

是的...我意识到 Mozilla 和 IE.only 使用 web-kit 的浏览器不支持 background-clip:text

【解决方案2】：

background-clip: text;

目前仅支持基于 webkit 的浏览器（Chrome 和 Safari）。它是非标准的，因此很难说其他浏览器（Firefox、Opera 和 Internet Explorer）是否会支持 text 属性。你想达到什么效果？我也许可以给你一个很好的选择而不使用它。

【讨论】：