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

Posted 2023-03-06

【中文标题】使用设备像素比媒体查询的 Firefox 63 Webkit CSS 问题

【英文标题】：Firefox 63 Webkit CSS issue using device pixel ratio media query

【发布时间】：2019-04-01 17:35:59

【问题描述】：

所以我正在创建一个运行良好的网页。但是最近 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 的原始问题（链接位置）

通过媒体查询破解解决

@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 的问题

【问题讨论】：

是的，Firefox 63 附带了对 WebKit 特定媒体功能的支持，因为其他网站只依赖它并且不理会 Firefox。很抱歉那些其他货物崇拜网站已经毁了像你这样的人。

我正在考虑在 chrome 上重新创建这个导航栏，看看它是否适用于所有版本的 firefox，这是一个好方法吗？

【参考方案1】：

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

【参考方案2】：

尝试应用一些高度：

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

删除你的 hack，看看效果如何。

【讨论】：

这似乎没什么区别！