如何在不影响 Edge 的情况下将样式应用于 Chrome

Question

我正在尝试应用 chrome 的样式来修复错误。我能够让它工作，但是当我在 Edge 中检查它时，我现在 edge looks 关闭了。如何将我的样式应用到 Chrome（我使用的是版本 60）而不影响任何其他浏览器？

@media (min-width: 860px) and (-webkit-min-device-pixel-ratio: 0) {
    table.content tbody tr td { min-width: 90px; }
}

@media (min-width: 711px) and (max-width: 860px) and (-webkit-min-device-pixel-ratio: 0) {
    table.content tbody tr td { min-width: 60px; }
}

Answer 1

要针对特定浏览器，您可以使用 @supports 并结合特定浏览器支持的 and/or 不支持的 CSS 属性。您也可以通过这种方式排除其他浏览器。

如果你只关心 Windows 上的 Chrome，你应该知道它不支持 hyphens: auto 即使有 -webkit 前缀（但是 Chrome for Mac and Android supports -webkit-hyphens: auto) so to target Chrome for Windows with media query use

@supports not ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {
/* Your styles here */
}

示例

@supports not ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {
  * {
    color: red;
  }
}

This is red, but only in Chrome for Windows

如何在不影响 Edge 的情况下将样式应用于 Chrome

How to apply style to Chrome without affecting Edge

css

google-chrome

microsoft-edge