是否有一种方法只对Safari应用样式?

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

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

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

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

当前回答

第一步:使用https://modernizr.com/

第二步:使用html类.regions只选择Safari

a { color: blue; }
html.regions a { color: green; }

Modernizr将根据当前浏览器支持的内容向DOM添加html类。Safari支持区域http://caniuse.com/#feat=css-regions，而其他浏览器不支持。这种方法在选择不同版本的IE时也非常有效。原力与你同在

其他回答

第一步:使用https://modernizr.com/

第二步:使用html类.regions只选择Safari

a { color: blue; }
html.regions a { color: green; }

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

@media \\0 screen {}

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

它在safari中100%工作，我试过了

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

最后，我使用了一点JavaScript来实现它:

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

然后在我的CSS目标苹果浏览器引擎的选择器将是:

.on-apple .my-class{
    ...
}

注意:如果只支持ios就足够了(如果你愿意牺牲Safari桌面)，那么这是可行的:

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

推荐文章