如何仅针对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开发人员工具中将页边空白的顶部设置为100％，那么它是完美的，但是在Chrome上页边空白的100％会使跨度向上。

我该怎么办？我发誓这在几周前就可以了。我希望firefox甚至在CSS中都找不到span.justForChrome选择器规则

预先感谢

更新

万一其他人正在经历这个问题，我想我会证明最终成功了。是因为我必须编译Angular应用程序（创建一个新的“捆绑式”样式表），还是因为我将媒体查询放置在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;
  }
}

当前该网站仍处于测试阶段，但这是一个：

导航栏的“基线”上都带有“购物车”字样和数字。

和往常一样，感谢您的所有帮助。

Answer 1

使用此媒体查询仅定位Chrome。

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    //chrome specifc css styles go here
}

Answer 2

我已经在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是一个类名，您可以使用其他类名进行更改。

检查以下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>