我试图找到一种方法来应用CSS只是Safari,但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器,但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。

我一直在尝试使用这个,但它也会影响Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

有人知道另外一个只适用于Safari的吗?


当前回答

我喜欢用下面的方法:

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">') 
};

其他回答

有一种方法可以从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
    }
}

如果你正在寻找Safari特定的浏览器黑客

我试过了,对我有效(只适用于Safari)

@supports (-webkit-hyphens:none){
        @content
}
    
@media not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) and (stroke-color:transparent) {
            @content
    }
}

您可以使用媒体查询hack从其他浏览器中选择Safari 6.1-7.0。

@media \\0 screen {}

免责声明:此攻击也针对旧Chrome版本(2013年7月之前)。

在(.myClass)中替换你的类

/*只支持Safari */ .myClass:没有(:根:根){ 在这里输入代码 }