如何针对只使用Chrome浏览器的CSS

由于某些原因，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>

目前该网站仍处于测试阶段，但以下是一个：

“购物车”和数字都在导航栏的“基线”上

---

像往常一样，感谢您的帮助。

我已经在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

是一个类名，您可以使用其他类名进行更改

检查以下内容或代码段：

测试{颜色：红色；}
@媒体全部和（-webkit最小设备像素比：0）和（最小分辨率：.001dpcm）{
.选择器：非（*：根），.chrome{
颜色：绿色；
}
}

---

如果您使用的是chrome，我应该是绿色的，在所有其他浏览器中我应该是红色的

如果没有一个最小的html+css示例可以完全重现这个问题，您将很难得到一个好的答案。我建议你加上这样一个例子。你想做什么？请注意，边距顶部的百分比值相对于最近的块容器的宽度起作用，这可能会导致问题。一定有更好的方法来做你想做的事情，但还不清楚。可能是@Mukyuu的副本谢谢你的回复，但我正在做他们在那篇文章中建议的事情，而且不起作用。这就是我再次发布这个问题的原因。我还读到，这种特殊的黑客不再适用于Bootstrap 4Thank you@mukyuu，这很有效。下面是一个dropbox链接到一个屏幕截图，显示Chrome和FireFox在我的dev env中以我期望的方式工作-我很快就谈到了-这在本地工作，但是当我编译Angular 6应用程序时-我猜scss文件发生了一些事情，当Angular将其编译成一个捆绑文件时只是好奇：最小分辨率是什么？它是Chrome支持的东西，但不是Opera或其他东西吗？还有：.selector:not（root）东西是什么意思？为什么不直接把.test放进去呢？这在Firefox85中是绿色的，所以黑客不适合它。

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