2

出于某种原因，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 上 100% 的 margin-top 会向上发送跨度。

我能做些什么？我发誓这是几周前的工作。我希望 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;
  }
}

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

两个浏览器的实时屏幕截图

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

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

4

1 回答 1

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是一个类名，您可以更改为其他类名。

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

于 2019-02-07T04:01:48.333 回答