css黑客分别针对Safari和Chrome
我需要针对不同浏览器的特定CSS样式 我已经设法找到了一种单独瞄准目标的方法: 仅限Firefox 仅限IE9 仅限IE8 仅限IE7 但是。。。我无法将Chrome和Safari单独作为目标。我发现了几种适用于Chrome和Safari的技术。有些技术应该针对其中一个。。。但它们相互超越,所以最后一个适用于两者 我已经设置了一个JS提琴来显示各种技术,并显示浏览器匹配颜色。有人能帮我找到分别瞄准Safari和Chrome的秘密吗 以下是CSS:css黑客分别针对Safari和Chrome,css,google-chrome,safari,Css,Google Chrome,Safari,我需要针对不同浏览器的特定CSS样式 我已经设法找到了一种单独瞄准目标的方法: 仅限Firefox 仅限IE9 仅限IE8 仅限IE7 但是。。。我无法将Chrome和Safari单独作为目标。我发现了几种适用于Chrome和Safari的技术。有些技术应该针对其中一个。。。但它们相互超越,所以最后一个适用于两者 我已经设置了一个JS提琴来显示各种技术,并显示浏览器匹配颜色。有人能帮我找到分别瞄准Safari和Chrome的秘密吗 以下是CSS: #tester { font-weight:b
#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>
浏览器匹配
任何帮助都将不胜感激!:) 你需要一些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');
}
以及:
示例:欢迎来到Stack Overflow Manny!对于Safari的这项工作,需要如何更改?
#tester.chrome {
/* your CSS here */
}
#tester.safari {
/* your CSS here */
}