css - 使用设备像素比媒体查询的 Firefox 63 Webkit CSS 问题

Question

所以我创建了一个运行良好的网页。但最近 Firefox 发布了 63 版，我的页面样式出现问题。问题在于媒体查询 -webkit-min-device-pixel-ratio。

HTML

<div class="navbar">
  <!-- Navbar for desktop -->
 <div class="nav-buttons">
  <button type="button" name="button" class="icon-logo"></button>
  <button type="button" name="button" class="page-link active">Product</button>
  <button type="button" name="button" class="page-link">User resources</button>
  <button type="button" name="button" class="page-link">Blog</button>
 </div>
 <div class="app-buttons">
    <button type="button" name="button" class="apple"></button>
    <button type="button" name="button" class="google"></button>
    <span>or</span>
    <button type="button" name="button" class="webapp">Sign up/log in</button>
  </div>
</div>

CSS

.navbar {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 999;
  border-bottom: 1px solid #92278f; }

给我的问题提供历史记录，我在 Firefox 上开发这个页面，所以我真的不需要使用这个媒体查询，但是当我在 chrome 上检查这个页面时，我在顶部的固定导航栏有样式问题。我在互联网上检查了是否可以使用某种方式将 css 规则专门应用于 chrome。我发现 -webkit-min-device-pixel-ratio:0 条件允许我这样做，巧合的是我也在 safari 上工作，在那里我发现了同样的问题。

工作正常(至 firefox 版本 62)

chrome 的原始问题(链接位置)

通过媒体查询 Hack 解决

@media screen and (-webkit-min-device-pixel-ratio:0)  {
  .navbar .app-buttons button.apple, .navbar .app-buttons button.google {
    top: 4px;
  }
  .navbar .app-buttons button {
    top: -8px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
  }
  .navbar .nav-buttons button.page-link {
    top: -7px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
  }
}

但现在将 Firefox 更新到版本 63 后，我发现此解决方案带来了更多问题。我在 mozilla 链接上读到 -webkit-min-device-pixel-ratio 不是可靠的媒体查询并且每次都不受支持。我想了解正在发生的事情，如果有一个解决方案我不需要使用此类 hack，或者是否有一个 hacky 解决方案可以暂时解决我的问题。

最近遇到 Firefox 63 问题

Answer 1

尝试应用一些高度:

.navbar,
.navbar .app-buttons button,
.navbar .nav-buttons button.page-link
{
/* include this css for example */
   height: 1.5em;  
}

.navbar .app-buttons button,
.navbar .nav-buttons button.page-link
{
/* include this css for example */
   line-height: 1.5em;  
   align-self:center;
}

删除你的黑客，看看它是如何进行的。