如何将 CSS 规则专门应用于 Google Chrome？

将特定的 CSS 规则专门应用于 Chrome

为了迎合 Google Chrome 独特的渲染引擎，通常需要应用 CSS 规则专属于它。一个示例是调整 div 元素的位置。

CSS 解决方案：

利用供应商前缀，您可以按如下所示定位特定于 Chrome 的样式：

• 适用于 Chrome、Safari、Edge 和Firefox：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div {
    top: 10px;
  }
}

• 对于 Chrome 29 （支持小数 DPI 值）

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  div {
    top: 0px;
  }
}

• 对于 Chrome 22-28:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector {
    -chrome-only(top: 0px);
  }
}

JavaScript 解决方案：

作为 CSS 的替代方案，您可以使用 JavaScript 来检测 Chrome 浏览器并相应地修改div的样式：

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // Modify the div's top position here
}

以上是如何将 CSS 规则专门应用于 Google Chrome？的详细内容。更多信息请关注PHP中文网其他相关文章！