How to write separate style sheet for Mozilla Firefox

问题

回答1:

It is generally considered extremely bad practice these days to write browser-specific stylesheets, so it would be interesting to hear why you feel you need to do this.

The one exception to this rule is if you need to support older versions of IE, which have a few incompatibilities with other browsers that can't easily be resolved in other ways. But even for IE the cases where you'll need to do this are few and far between. For Firefox they're virtually nil.

If you do need to distinguish between browsers due to differing features, a far better solution is to use feature detection rather than browser detection to resolve the differences.

One very good solution to this is to use Modernizr. This is a Javascript library which (among other things) adds a bunch of classes to the body tag of your HTML page. The classes it adds will be different according to the features that are supported by your browser. This allows you to write stylesheets and JS code that reference these classes, so you can have different behaviour according to the features in your browser.

If you still think that browser-detection is a good idea, here is some reading material for you: http://css-tricks.com/browser-detection-is-bad/

Hope that helps.

回答2:

You could do this:

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

This being said, you should not use browser specific CSS aside from IE.

回答3:

If you are using HTML5 and modernizer JS in your document. you can write separate class specifically for Firefox by simply adding .gecko as a prefix with class name.

For example;

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

and for Firefox;

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

回答4:

Simple way is to separate two different style-sheet for different browsers. After that, put following coding into your file.

<!--[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]>

来源：https://stackoverflow.com/questions/4624208/how-to-write-separate-style-sheet-for-mozilla-firefox

标签

html

css

stylesheet

css-float