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

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

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

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


当前回答

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

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

其他回答

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

我喜欢用下面的方法:

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

适用于iOS 16和macOS Ventura:

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  .body {
    background-color: red;
  }
}

在(.myClass)中替换你的类

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

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 >