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

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

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

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


当前回答

仅限萨拉里

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

其他回答

顺便说一下,对于那些只需要在移动设备上使用Safari的人来说,只需在这个黑客中添加一个媒体查询:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

别忘了把.safari_only类添加到你想要的目标元素中,例如:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

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

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

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

对于那些想要在Safari 7.0及以下版本而不是7.1及以上版本上实现黑客攻击的人,请使用:

.myclass { (;property: value;); }
.myclass { [;property: value;]; }

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

第一步:使用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时也非常有效。原力与你同在