我试图找到一种方法来应用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}
}

其他回答

在(.myClass)中替换你的类

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

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

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

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

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

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

@media \\0 screen {}

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

适用于iOS 16和macOS Ventura:

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

如此:

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}