max-width 767px媒体查询 - 样式仅在766px或更低时呈现（仅受Firefox影​​响）

Question

我已经解决了这个问题，但没有完全理解这个让我担心的问题。我想知道是否有人可以帮我理解发挥作用的是什么？

我通过CSS将iframe设置为100％宽度。容器div为767px。因此iframe也是如此。

我在iframe的样式表中有以下媒体查询：

@media (max-width: 767px) {
    body {
        background: red;
    }
}

在除Firefox以外测试的所有流行浏览器中，媒体查询生效并将正文背景设置为红色。在Firefox中，媒体查询仅在iframe设置为766px - 1px时才生效，即使max-width应为“up and including”。这似乎是一个错误。我现在的解决方法是将iframe宽度设置为766.7px（减去.3像素）。这似乎适用于Firefox（减去0.2不起作用）。

我的问题 - 这里发生了什么？这可能是Firefox中的一个错误吗？我知道我的iframe实现有点不规则，但我认为根本原因可能与这个启发我的解决方案的问题有关：Media query lost in Firefox when window resized to max-width minus scrollbar width

Answer 1

FWIW，Chrome上的相同行为是由于...标签的浏览器缩放设置设置为125％而不是100％

我认为这推卸了一个电话模拟iframe的计算，其中的iframe应该低于767px的阈值。

在注意到＆gt; _＆gt;

之前，我花了一个小时来区分旧部署的所有资源

Answer 2

我遇到了同样的问题。我没有在浏览器中设置“缩放”，但是我有一个2K监视器，并使用Windows 10操作系统提供的“显示”自定义缩放比例，我相信这会导致FF和Chrome出现怪异的行为。

要解决此问题，请尝试在about：config页面上将layout.css.devPixelsPerPx设置为1.0（默认值为-1），以查看是否有效。

如有必要，可以以0.1或0.05的步长（1.1或0.9）调整其值，直到图标或文本看起来正确为止。