我试图找到一种方法来应用CSS只是Safari，但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器，但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。
我一直在尝试使用这个，但它也会影响Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有人知道另外一个只适用于Safari的吗?
当前回答
注意:如果只支持ios就足够了(如果你愿意牺牲Safari桌面)，那么这是可行的:
@supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
其他回答
它在safari中100%工作，我试过了
@media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
仅限萨拉里
.yourClass:not(:root:root){
/* ^_^ */
}
有一种方法可以从Chrome中过滤Safari 5+:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
color:red;
}
/* Safari only override */
::i-block-chrome,.myClass {
color:blue;
}
}
这个hack 100%只适用于safari 5.1-6.0。我刚刚测试成功了。
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
我喜欢用下面的方法:
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">')
};
