如何將 CSS 樣式專門套用於 Safari，同時避免與其他瀏覽器發生衝突？

是否可以專為 Safari 設計內容樣式？

問題：

你正在努力尋找僅影響Safari 的CSS，因為之前的方法也會影響Chrome，因為這兩種瀏覽器目前都會影響Safari 的CSS，因為之前的方法也會影響Chrome，因為這兩種瀏覽器目前都會影響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 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        /* CSS styles */

    }
}}

對於Safari 6.1 到10.0，利用：

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

用法：

<div>

注意：

請記住總是提供的在即時測試中測試這些技巧在您的網站上實施它們之前。確保測試頁面按預期工作，消除潛在的 CSS 衝突。

以上是如何將 CSS 樣式專門套用於 Safari，同時避免與其他瀏覽器發生衝突？的詳細內容。更多資訊請關注PHP中文網其他相關文章！