Question

今天我正在尝试优化我的网站，以便在Firefox中获得更好的渲染效果！我的问题是text-shadow和font-weight属性......我想为firefox设置自定义值（我的网站只有mac兼容所以我不需要IE兼容性）但我不会单独使用样式表只有这两个属性！有什么方法可以做到吗？或者我必须使用PHP脚本来过滤用户代理并为firefox加载自定义样式表？

提前致谢！

Answer 1

好的，现在有点晚了，但对于像我这样不喜欢听到上述答案的人来说，有一种方法可以做到。

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                background-color:blue;
                width: 100px;
                height: 100px;
            }

            @-moz-document url-prefix()
            {
                #myDiv
                {
                    background-color: red;
                }
            }
        </style>
    </head>
    <body>
        <div id="myDiv"></div>
    </body>
</html>

Answer 2

您可以使用CSS Browser Selector。

Answer 3

您似乎希望仅支持支持text-shadow的浏览器，那么为什么只定位Firefox？您的方法应该是仅针对支持font-weight的浏览器更改text-shadow。但这说起来容易做起来难。

浏览器嗅探器不会起作用，除非他们可以区分Firefox 3.5和早期版本。与KahWee链接的那个不会实现这一点，但我不建议使用浏览器嗅探 - 这不是最佳实践。

我建议将font-weight设置为与text-shadow一起使用的任何内容，然后包含IE条件，将访问者浏览器的多数重置为原始的，无阴影的font-weight。

示例：

<style type="text/css" media="screen">
    .some-text {
        color: #fff;
        font-weight: bold;
        text-shadow: #000 0.1em 0.1em 0.2em;
    }
</style>

<!--[if IE]>
<style type="text/css" media="screen">
    .some-text {
         font-weight: normal;
         text-shadow: none; /* Does nothing now, but explicitly define NONE
            for future IE versions as that is what is intended */
    }
</style>
<![endif]-->

使用此功能，您将在这些浏览器中使用正确的text-shadow获得font-weight：

Firefox 3.5 +
Opera 9.5 +
Safari 1.1+（自2003年以来！）
Chrome 2.0 +
Konqueror 3.4 +

如果你想在IE中使用投影，你可以在filter使用DropShadow()表达式，但我个人不建议使用专有的CSS扩展。

然而，对于较旧的非IE浏览器（例如Firefox 3.0及更低版本，以及Opera 9.2x及更低版本），您唯一真正的“损失”将是不正确的font-weight。

对于非常有限的旧浏览器子集来说，更改font-weight是否值得JavaScript或PHP浏览器嗅探？

如果答案仍然是肯定的，那么就有this one等PHP浏览器嗅探器。

Answer 4

条件仅适用于IE，抱歉。也许其中一些功能可以帮助您，它们仅适用于gecko浏览器：Mozilla css extensions

firefox（Gecko）条件样式表

4 个答案: