使用设备像素比率媒体查询的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）

铬的原始问题（链接位置）

解决了媒体查询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不是可靠的媒体查询，并非每次都受支持。我想了解正在发生的事情，如果有不需要我使用此类黑客的解决方案，或者有目前可以解决我的问题的黑客解决方案。

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;
}

删除您的骇客，了解其进展。

Answer 2

问题是我没有为类display: flex或app-buttons使用nav-buttons，因为所有子按钮在不同的浏览器中呈现的方式不同。我已经通过使用Flex样式解决了这个问题，现在我没有使用任何过时的修补程序来呈现正确的样式。