Mozilla CSS 破解文本阴影答案

【问题标题】：Mozilla CSS hack for text shadowMozilla CSS 破解文本阴影
【发布时间】：2012-02-16 17:40:14
【问题描述】：

我正在尝试仅在 Mozilla 浏览器中创建文本阴影。（我使用它作为我正在使用的字体的一些问题的解决方法。）

我已经尝试过-moz-text-shadow，但它现在似乎已经失效并且不再需要 moz 扩展。但我不希望 Internet Explorer 和 WebKit 使用文本阴影。

为什么-moz函数会被取走？

【问题讨论】：

这是一个奇怪的要求。你能解释一下为什么你不希望其他浏览器呈现相同的内容吗？对我来说，我一直在努力让所有浏览器的行为都一样。我什至从来没有考虑过故意让他们表现得不同（他们自己做得很好>.
因为我正在使用字体，而 Firefox 在渲染字体方面做得最差。我强迫 chrome 使用 svg，它看起来很棒，但 woff 在 Firefox 中看起来很糟糕。
-moz, -webkit, -o, -ms 称为浏览器前缀。它用于不完全支持该属性的浏览器。
一旦一个新的 CSS 属性被散列出来，供应商前缀就会被删除——这就是我们想要的行为，这就是为什么新版本的 Firefox 不支持旧的前缀版本。
当前的 A List Apart 有 2 篇关于供应商前缀的好文章以及为什么 -moz- 被删除并不“奇怪”。一些推荐阅读以了解更多关于前缀的信息（特别是因为其中一篇是对 Tantek 的采访，他为 Mozilla 工作以及当前关于 -moz- 正在寻找支持 -webkit- 移动 FF 的热门话题）alistapart.com/issues/344

标签： css firefox

【解决方案1】：

您可以使用 CSS hack 单独定位 Firefox，例如：

body:not(:-moz-handler-blocked) a { background-color: red; }

对于 Firefox，该框应为红色，对于所有其他浏览器，该框应为蓝色。

【讨论】：

【解决方案2】：

-moz、-webkit、-o 和-ms 称为浏览器前缀。它们用于不完全支持该属性的浏览器。

现在除了 Internet Explorer 8 和更低版本之外的所有现代浏览器都支持 text-shadow 属性。

如果您想强制为 Firefox 添加文本阴影，您可以使用 JavaScript 检测浏览器并添加文本阴影属性。

【讨论】：

【解决方案3】：

粗略的例子：

text-shadow: 0 0 transparent;
-webkit-text-shadow: 0 0 transparent;
-khtml-text-shadow: 0 0 transparent;
-moz-text-shadow: 1px 1px #ff0000;

【讨论】：

如果我也想使用 moz only 版本，你是说我必须先使用 text-shadow 吗？我已经在 css 类中尝试过 -moz-text-shadow，但它不起作用，但是当我删除 moz 扩展时，它可以在所有浏览器中工作，这不是我想要的。