如何将样式专门应用于 Safari 浏览器？

针对 Safari 限制样式应用的解决方案

摘要：Safari 不再使用 @media screen and (-webkit-min-device-pixel-ratio:0) 来专门针对其，但有其他方法可以使用。

解决方法：

针对 Safari 18.0.1 及更新版本：

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {
  color: #0000FF;
  background-color: #CCCCCC;
}

针对 Safari 10.1 及更新版本：

/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
  .safari_only {
    color: #0000FF;
    background-color: #CCCCCC;
  }
}}

针对 Safari 6.1 至 10.0：

/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media {
  .safari_only {
    color: #0000FF;
    background-color: #CCCCCC;
  }
}}

其他版本特定的 Safari 黑客：

浏览文章原文以获得更多针对特定 Safari 版本的 CSS 黑客，包括 Safari 9、10 和 11。

使用这些黑客：

要在 Safari 中应用这些样式，请使用以下标记：

<div class="safari_only">在此处放置您的内容</div>

以上是如何将样式专门应用于 Safari 浏览器？的详细内容。更多信息请关注PHP中文网其他相关文章！