css hack將Safari和Chrome同時作爲目標單獨使用

Question

我需要針對各種瀏覽器的特定CSS樣式。

我設法找到一種方法，分別針對： 僅Firefox IE9只 IE8僅 IE7僅

但是......我看不到單獨針對Chrome和Safari。我發現了幾種適用於Chrome和Safari的技術。一些技術應該瞄準一個或另一個...但是它們相互搭訕，因此最後一個適用於兩者。

我已經設置了一個JS小提琴來展示各種技術，並顯示瀏覽器的匹配顏色。任何人都可以幫我找到針對SEPARATELY 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> 

任何幫助將不勝感激！ :)

Answer 1

你需要一些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/