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

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

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

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


当前回答

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

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

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

其他回答

第一步:使用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://www.bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium/#safari

@supports (background: -webkit-named-image(i)) {
// 
}

{后h1:: 内容:“不”; margin-left: .3em; 颜色:红色; } @supports (background: -webkit-named-image(i)) { {后h1:: 内容:“是的”; 颜色:绿色; } } <!DOCTYPE html > < html > < >头 < meta charset = " utf - 8 " > <meta name="viewport" content="width=device-width"> <标题> JS本< /名称> > < /头 身体< > <标题>旅行吗?< / h1 > 身体< / > < / html >

我已经测试过了,它对我很有效

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}

我喜欢用下面的方法:

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

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

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

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

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