23

物事を壊すクライアントが望んでいたフォント置換スクリプトのため、 chrome/operaハックを行う必要があります...これは悲しいことですが、すべてが IE6-7、FF2-3、および Safari で機能しています。スクリプト自体を修正する方法はありません。CSS と HTML を使用してハッキングするしかありません。

次の行で何かをしようとしています:

<!--[if IE 6]>
   <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->

出来ますか？

次のようなクロム固有の修正を行うこの方法を見ました。

body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

これは稼働していますか？もっと簡単な方法はありますか？オペラはどうですか？

ありがとう！

4

6 に答える 6

39

これを行うためのクリーンなjavascriptの方法：http：//rafael.adm.br/css_browser_selector/

これは、ブラウザ固有のクラスをhtmlのbodyタグにアドバタイズします。これは、次のようにcssで使用できます。

.opera #thingie, .chrome #thingie {
  do: this;
}

お役に立てれば。

于 2009-06-03T19:13:28.377 に答える
14

CSSハックを避けてください。彼らは壊れます。

グーグルクローム：

@media not all and (-webkit-min-device-pixel-ratio:0)
{  
    #example
    {
        width: 200px;
    }
}

サファリ：

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #example
    {
        width: 200px;
    }
}

オペラ：

@media not screen and (1)
{
    #example
    {
        width: 200px;
    }
}

CSSをOpera11にのみ適用しますか？

CSSをOperaでのみ表示する方法

LTEOpera10の将来性のあるCSSハック

于 2011-08-22T08:36:30.340 に答える
11

Google (および Safari) の場合は、次のように簡単に使用できます。

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />

これにより、Webkit 固有のスタイルシートが読み込まれます。「タイプ」には任意の名前を付けることができますが、含める必要があります。

好きなようにスタイルシートを作成するだけで、Webkit 以外のすべてのブラウザーは単純にそれを無視します。

上記のハックを Opera に使用する必要があります。以下は私にとって最もうまくいきました：

@media not screen and (1)
    {
    #example
    {
    width: 200px;
    }
}

ブラウザ固有の @font-face 宣言をロードするために使用しました。

于 2011-10-01T12:43:20.633 に答える
2

.ie - Internet Explorer (すべてのバージョン)
.ie10 - Internet Explorer 10.x
.ie9 - Internet Explorer 9.x
.ie8 - Internet Explorer 8.x
.ie7 - Internet Explorer 7.x
.ie6 - Internet Explorer 6.x
. ie5 - Internet Explorer 5.x
.gecko - Firefox (すべてのバージョン)、Camino、SeaMonkey
.ffxx - Firefox xx (特定のバージョンの番号で xx を変更) new
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (すべてのバージョン)
.opera12 - Opera 12.x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - Opera 8.x
.konqueror - コンケロール
.webkit - Safari、NetNewsWire、OmniWeb、Shiira、Google Chrome
.chrome - Google Chrome (すべてのバージョン)
.chromexx - Chrome xx (特定のバージョンの番号で xx を変更) new
.safari - Safari (すべてのバージョン) new
.iron - SRWare鉄

.[OSコード].[ブラウザコード] .yourclass { padding-left:5px; font-size:14px }

body { background-color:#000 }
.ie8 body {background-color:#111 } (Internet Explorer 8.x 固有)
.win.ie8 body { background-color:#222 } (固有Internet Explorer 8.x の場合、Microsoft Windows のすべてのバージョン)
.opera body { background-color:#333 } (Opera のすべてのバージョン)
.ff15 body { background-color:#444 } (Firefox 15.x に固有)
.linux .gecko body { background-color:#555 } (x11 および Linux 上の Firefox、Camino、SeaMonkey のすべてのバージョン)

.ie7 #right, .ie7 #left { width:320px }

詳細については、このリンクを参照して ください http://cssbs.altervista.org/

于 2013-06-28T07:13:16.930 に答える
0

「ユーザーエージェントのスニッフィングはbaaadddです」ということを覚えておいてください

それは決して良い習慣ではありません。

User-Agent スニッフィングが実装されている Web サイトを維持するのは、ただの苦痛です。

数量が少ない場合、または複数のスタイルシートを作成する時間がない場合は、個別のスタイルシートまたは css ハックを使用することをお勧めします。

Opera の場合、次のトリックを使用できます。

@media all and (-webkit-min-device-pixel-ratio:10000),
    not all and (-webkit-min-device-pixel-ratio:0) { 
     #id {
         css rule;
     }
 }

そして悲しいことに、すべての Chrome CSS ハックは Safari にも適用されます。

古いバージョンの Safari (よく覚えていれば <= safari3) を除いて、2 つのレンダリングを分離する方法はありません。

于 2012-02-19T10:18:41.070 に答える