如何定位特定於 Chrome 的 CSS 規則？

如何定位特定於Chrome 的CSS 規則

使用CSS 自訂Web 元素時，您可能會遇到需要將特定樣式應用於某些DOM 元素的情況Chrome 瀏覽器。以下是一些實現此目的的解決方案：

CSS 解決方案

1. Webkit 媒體查詢： Chrome 對許多 CSS 屬性使用「-webkit」前綴。您可以使用「-webkit-min-device-pixel-ratio」媒體查詢來定位特定於Chrome 的樣式，如下所示：

/* Chrome, Safari, Edge, Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

2. 特定於Chrome的媒體查詢: 對於Chrome 版本29，您可以使用下列媒體查詢來定位Chrome僅：

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

3. 特定於Chrome 的CSS 語法(Chrome 22-28)： 在Chrome 版本22-28 中，您可以使用「- chrome- :only"語法來定位瀏覽器中的特定元素：

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript解決方案

您也可以使用JavaScript 檢查瀏覽器是否為Chrome 並相應地應用所需的樣式：

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // modify button 
}

以上是如何定位特定於 Chrome 的 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！