如何将 CSS 样式专门应用于 Safari，同时避免与其他浏览器发生冲突？

是否可以专门为 Safari 设计内容样式？

问题：

你正在努力寻找仅影响 Safari 的 CSS，因为之前的方法也会影响 Chrome，因为这两种浏览器当前都在使用网络工具包。 Safari 和 Chrome 中的不同对齐方式使得样式特别具有挑战性。

解决方案：

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF;    /* Example text color */
  background-color:#CCCCCC;   /* Example background color */

}

或者，对于 Safari 10.1 及更高版本，使用：

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        /* CSS styles */

    }
}}

或

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        /* CSS styles */

    }
}}

对于 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 { 

        /* CSS styles */

    }
}}

特定 Safari 版本的其他 hack 可以在提供的中找到

用法：

<div>

注意：

请记住始终在提供的实时测试中测试这些技巧在您的网站上实施它们之前。确保测试页面按预期工作，消除潜在的 CSS 冲突。

以上是如何将 CSS 样式专门应用于 Safari，同时避免与其他浏览器发生冲突？的详细内容。更多信息请关注PHP中文网其他相关文章！