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

【问题标题】：How to apply style to Chrome without affecting Edge如何在不影响 Edge 的情况下将样式应用于 Chrome
【发布时间】：2017-08-10 13:46:26
【问题描述】：

我正在尝试为 chrome 应用一种样式来修复错误。我能够让它工作，但是当我在 Edge 中检查它时，我现在边缘看起来不正常。如何将我的样式仅应用于 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; }
}

【问题讨论】：

@media screen and (-webkit-min-device-pixel-ratio:0) { } 可用于 WebKit 浏览器（这也会影响 Safari）
你关心影响 Safari 吗？此外，Windows 上的 Chrome 和 Mac（和 iOS）上的 Chrome 有不同的实现，有时这种查询对两者都不起作用。有时错误只与 Windows 或 Mac 有关。
@APAD1 当我尝试@media screen and (min-width: 860px) and (-webkit-min-device-pixel-ratio: 0) 边缘仍然受到影响。
@VadimOvchinnikov 现在，我不关心 Mac

标签： css google-chrome microsoft-edge

【解决方案1】：

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

如果您只关心 Windows 上的 Chrome，您应该知道它不支持 hyphens: auto，即使带有 -webkit 前缀（但 Mac 和 Android 版 Chrome 支持 -webkit-hyphens: auto），因此使用媒体定位 Windows 版 Chrome查询使用

@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

【讨论】：

这个可以和宽度限制结合吗？
@AntarrByrd 你的意思是嵌套的@media 查询？是的，Chrome 似乎支持这一点。
@VadimOvchinnikov 这对我来说也是红色的，Chrome/Debian ;) 但我喜欢你的想法，接受我的投票
@SVSchmidt 没关系，-webkit-hyphens: auto Chrome 仅支持 Mac 和 Android，所以我说实话。我在写答案时没有考虑 Linux。感谢您的支持。