如何为 Mozilla Firefox 编写单独的样式表答案

【问题标题】：How to write separate style sheet for Mozilla Firefox如何为 Mozilla Firefox 编写单独的样式表
【发布时间】：2011-01-07 09:42:39
【问题描述】：

如何为 Mozilla Firefox 编写单独的样式表

【问题讨论】：

你为什么要这样做？常规网站绝对不需要这样做。这听起来真的搞砸了 CSS。
虽然在极少数情况下只有 FF 会搞砸，但您应该始终致力于为所有浏览器提供尽可能好的服务——即使是 ie。如果你制作了一个好的 CSS，你只需要在最坏的情况下提供帮助。浏览器的 css 通常是非常不鼓励的，应该避免。

标签： html css stylesheet css-float

【解决方案1】：

你可以这样做：

<style type="text/css">
@-moz-document url-prefix() {
    h1 { font-size:200px; /* Font size is huge in Firefox */ }
}
</style>

也就是说，除了 IE，您不应该使用特定于浏览器的 CSS。

【讨论】：

【解决方案2】：

如今，编写特定于浏览器的样式表通常被认为是非常糟糕的做法，因此听听您为什么觉得需要这样做会很有趣。

此规则的一个例外是，如果您需要支持旧版本的 IE，它与其他浏览器存在一些无法通过其他方式轻松解决的不兼容问题。但即使对于 IE，您需要这样做的情况也很少。对于 Firefox，它们几乎为零。

如果您确实需要因功能不同而需要区分浏览器，更好的解决方案是使用功能检测而不是浏览器检测来解决差异。

一个很好的解决方案是使用Modernizr。这是一个 Javascript 库，它（除其他外）将一堆类添加到 HTML 页面的 body 标记中。它添加的类会根据浏览器支持的功能而有所不同。这允许您编写引用这些类的样式表和 JS 代码，因此您可以根据浏览器中的功能具有不同的行为。

如果您仍然认为浏览器检测是个好主意，这里有一些阅读材料供您参考：http://css-tricks.com/browser-detection-is-bad/

希望对您有所帮助。

【讨论】：

【解决方案3】：

如果您在文档中使用 HTML5 和 Modernizer JS。您可以通过简单地添加 .gecko 作为类名的前缀来专门为 Firefox 编写单独的类。

例如；

.className{
   padding:0px; margin:0px;
}

对于火狐；

.gecko .className{
   padding:0px; margin:0px
}

【讨论】：

【解决方案4】：

简单的方法是为不同的浏览器分离两个不同的样式表。之后，将以下代码放入您的文件中。

<!--[if IE]>
    <link href="ie_style.css" rel="stylesheet" type="text/css" />
<![endif]-->
<![if !IE]>
    <link href="ff_style.css" rel="stylesheet" type="text/css" />
<![endif]>

【讨论】：

您可能应该提到条件 cmets 仅适用于 IE。
这将针对 ie 而不是 ie 浏览器。它不仅仅针对 Firefox。
@Sotiris：没错，但这只是因为 IE 没有加载ff_style.css。您可以不使用这种技术区分 Firefox 和 Chrome。
@elusive 我就是这么说的 :) 我们只是在同一时间发布相同类型的消息。