Question

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

Answer 1

你可以这样做：

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

这就是说，除了IE之外，你不应该使用浏览器特定的CSS。

Answer 2

现在通常认为编写特定于浏览器的样式表非常糟糕，所以听听你觉得你需要这样做的原因会很有趣。

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

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

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

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

希望有所帮助。

Answer 3

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

例如;

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

和Firefox;

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

Answer 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]>

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

4 个答案: