2

さまざまなブラウザーの特定の CSS スタイルをターゲットにする必要があります。

個別にターゲットにする方法を見つけることができました: Firefox のみ IE9 のみ IE8 のみ IE7 のみ

しかし... ChromeとSafariを別々にターゲットにすることはできません。Chrome と Safari の両方で機能するいくつかの手法を見つけました。いくつかのテクニックは、どちらか一方をターゲットにすることになっています...しかし、それらは互いにオーバーライドするため、最後のテクニックは両方に適用されます。

JS フィドルを設定して、さまざまなテクニックを表示し、ブラウザーの一致する色を表示しました。Safari と Chrome を別々にターゲットにする秘訣を教えてくれる人はいますか?

http://jsfiddle.net/lbriquet/MP4qZ/

CSSは次のとおりです。

#tester {
font-weight:bold;
padding:10px;
margin:5px;
color: #FFF;
border:#00F solid 4px\9; /* IE8 and below */    
*border:#FF0 solid 4px; /* IE7 and below */
-bracket-:hack(;
    border:#0FF solid 4px;  /* Chrome only*/
);
}
:root #tester{
border:#0F0 solid 4px \0/IE\9; /* IE9 +IE10pp4 */
}
@-moz-document url-prefix() { #tester { border:#F00 solid 4px;  /* Firefox only*/ } }

@media all and (-webkit-min-device-pixel-ratio: 0) { #tester { border: #F0F solid 4px; /* Safari */  } }


/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#tester {
    border: #F90 solid 4px; 
}
}

html は次のとおりです。

<span id="tester">Browser match</span>

どんな助けでも大歓迎です！:)

4

1 に答える 1

0

いくつかの JS が必要です。

var is_chrome = window.chrome;
var is_safari = (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1);

if (is_chrome) {
    $('#tester').addClass('chrome');
}
else if (is_safari) {
    $('#tester').addClass('safari');
}

と：

#tester.chrome {
   /* your CSS here */
}
#tester.safari {
   /* your CSS here */
}

例: http://jsfiddle.net/7h5rh/1/

于 2014-01-17T16:49:46.420 に答える