2

我需要针对各种浏览器指定特定的 CSS 样式。

我设法找到了一种单独定位的方法： Firefox only IE9 only IE8 only IE7 only

但是...我看不到分别针对 Chrome 和 Safari。我发现了几种适用于 Chrome 和 Safari 的技术。有些技术应该针对其中一个……但它们会相互覆盖，因此最后一个适用于两者。

我设置了一个 JS fiddle 来显示各种技术，并显示浏览器匹配颜色。谁能帮我找到分别针对 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 回答