如何定位特定于 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中文网其他相关文章！