681

条件付きコメントを使用すると、ブラウザ固有のCSSルールでInternetExplorerをターゲットにするのは簡単です。

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

時々、誤動作するのはGeckoエンジン（Firefox）です。他の単一のブラウザではなく、CSSルールでFirefoxのみをターゲットにする最良の方法は何でしょうか。つまり、Internet ExplorerはFirefoxのみのルールを無視するだけでなく、WebKitとOperaも無視する必要があります。

注：「クリーンな」ソリューションを探しています。JavaScriptブラウザスニファを使用して「firefox」クラスをHTMLに追加することは、私の意見ではクリーンとは言えません。条件付きコメントがIEにとって「特別」なだけであるように、ブラウザの機能に依存するものを見たいのですが…</ p>

4

12 に答える 12

1379

OK、見つけました。これはおそらく最もクリーンで簡単なソリューションであり、JavaScriptがオンになっていることに依存していません。

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>

これは、さらに別のMozilla固有のCSS拡張機能に基づいています。これらのCSS拡張機能の全リストがここにあります：MozillaCSS拡張機能。

于 2009-06-04T22:43:32.870 に答える
151

Updated(from @Antoine comment)

You can use @supports

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>

More on @supports here

于 2015-09-08T10:10:55.450 に答える
83

IE、FF、Chrome の 3 つの異なるブラウザーに取り組む方法は次のとおりです。

<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
    width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
    width:486px;
}
</style>
<![endif]-->
于 2011-01-21T09:33:16.040 に答える
13

まず免責事項です。私は、以下に提示する解決策を実際に支持しているわけではありません。私が書いたブラウザ固有の CSS は IE (特に IE6) だけですが、そうでないことを望みます。

さて、解決策です。あなたはそれをエレガントにするように頼んだので、それがどれほどエレガントかはわかりませんが、Gecko プラットフォームのみをターゲットにすることは確かです。

このトリックは、JavaScript が有効になっており、Firefox や他のすべての Gecko ベースの製品で内部的に頻繁に使用されているMozilla バインディング ( XBL ) を利用している場合にのみ機能します。比較すると、これは IE の CSS プロパティの動作に似ていますが、はるかに強力です。

私のソリューションには 3 つのファイルが含まれています。

  1. ff.html: スタイルを設定するファイル
  2. ff.xml: Gecko バインディングを含むファイル
  3. ff.css: Firefox 固有のスタイリング

ff.html

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

ff.xml

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
    <binding id="load-mozilla-css">
        <implementation>
            <constructor>
            <![CDATA[
                var link = document.createElement("link");
                    link.setAttribute("rel", "stylesheet");
                    link.setAttribute("type", "text/css");
                    link.setAttribute("href", "ff.css");

                document.getElementsByTagName("head")[0]
                        .appendChild(link);
            ]]>
            </constructor>
        </implementation>
    </binding>
</bindings>

ff.css

h1 {
 color: red;
}

更新: 上記の解決策はあまり良くありません。新しい LINK 要素を追加する代わりに、その「firefox」クラスを BODY 要素に追加する方がよいでしょう。そして、上記の JS を次のものに置き換えるだけで可能です。

this.className += " firefox";

このソリューションは、 Dean Edwards の moz-behaviorsに触発されています。

于 2009-06-04T21:02:08.130 に答える
8

あなたのアイデアのバリエーションは、server-side USER-AGENT detectorどのスタイル シートをページに添付するかを判断する を用意することです。このようにして、firefox.css, ie.css, opera.css, etc.

きれいだとは思わないかもしれませんが、Javascript 自体で同様のことを行うことができます。

default.csswhich includesall common styles and then specific style sheetsを追加してデフォルトをオーバーライドまたは強化することで、同様のことを行いました。

于 2009-06-04T20:26:48.700 に答える
3

これを行う唯一の方法は、さまざまなCSSハックを使用することです。これにより、次回のブラウザー更新でページが失敗する可能性が高くなります。どちらかといえば、js-browserスニファーを使用するよりも安全性が低くなります。

于 2009-06-04T20:22:19.550 に答える
1

-mozプレフィックス付き

div:-moz-read-only {
  background: green;
}

textarea:-moz-read-write {
  background: green;
}

:-moz-any(div#foo) div.bar {
  background: green;
}

li:-moz-first-node, li:-moz-last-node {
  background: green;
}
于 2021-05-30T16:53:57.617 に答える