如何针对 Chrome 仅浏览器 CSS

Question

出于某种原因 Chrome 显示此跨度异常高于 FireFox。

结果我写了下面CSS:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .selector:not(*:root),
  span.justForChrome {
    display: block;
    margin-top: 23%;
    text-align: right;
  }
}

以下是HTML：

  <li class="nav-item">
    <a
      class="nav-link"
      data-toggle="tooltip"
      title="Shopping cart"
      id="{{ shoppingCart }}"
      routerLink="/shopping-cart"
      ><span class="justForChrome"
        >Shopping Cart<span id="counter">{{ counter }}</span></span
      ></a
    >
  </li>

虽然这在 Chrome 中有效，但现在 FireFox 显示跨度过高。如果我在 FireFox 开发人员工具中将 margin-top 设置为 100%，那么它是完美的，但是 Chrome 上的 margin-top 为 100% 会向上发送跨度。

我能做什么？我发誓这在几周前就奏效了。我希望 firefox 甚至不会在 CSS

中找到 span.justForChrome 选择器规则

提前致谢

更新

如果其他人正在经历这个，我想我会展示最终起作用的东西。我不知道是因为我必须编译 Angular 应用程序，它创建了一个新的 "bundled" 样式表，还是因为我将媒体查询放在了 scss 文件的末尾，我不知道，但这是我在 scss 文件末尾使用的媒体查询，它有效：

@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .selector:not(*:root),
  span.justForChrome {
    display: block;
    margin-top: 23%;
    text-align: right;
  }
}
@-moz-document url-prefix() {
  span.justForChrome {
    display: block;
    margin-top: 94px !important;
    text-align: right;
  }
}

目前该网站仍处于测试阶段，但这里有：

单词 "Shopping Cart" 和数字都在导航栏的 "baseline" 上。

一如既往，感谢大家的帮助。

Answer 1

我已经在 Microsoft Edge 42.17134.1.0、Firefox 65.0（64 位）和 Chrome 版本 72.0.3626.81（官方构建）（64 位）中测试了以下代码，它可以作为预计在 Chrome.

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  .selector:not(*:root), .chrome {
    color: green;
  }
}

请注意，.chrome 是一个 class 名称，您可以更改为其他 class 名称。

检查以下 JsFiddle 或片段：

.test {color:red;}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  .selector:not(*:root), .chrome {
    color: green;
  }
}

<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>

如何针对 Chrome 仅浏览器 CSS

How to target for Chrome only browsers CSS

css

google-chrome

css-hack