CSS媒体查询不适用于Firefox 37

我在一个网站上工作（最初是在别处设计的）添加CSS媒体查询，以调整布局，使其更便于移动

我大约在一个月前完成了这项工作。然而，我现在看到了一些奇怪的行为，我想知道为什么会发生以下情况，以及如何解决或纠正它：

一些注意事项：

• 该网站是
• 该网站建成后（2015年4月中旬）在所有浏览器上均按预期运行
• 这个问题只出现在Firefox上

问题：

/* No greater than 480px, no less than 100px */
@media (max-width:480px) and (min-width:100px) {
    .foo {
        display:none;
    }
}​

正如你所看到的，在Chrome浏览器上，CSS按照预期重新调整了视频下方的菜单。在Firefox上，它没有，它应该在更大的浏览器宽度下停留在视频旁边。这两个浏览器是完全相同的页面，完全相同的时间，紧挨着彼此

我花了很长时间研究各种媒体查询，发现Firefox似乎没有对if

width<400px

Firefox不适用但Chrome适用的媒体查询：

@media only screen
and (max-width : 400px) {
    .outerBox {
        width:96% !important;
    }
    .topBox > object {
        width:98% !important;
        float:none !important;
        display:block !important;
        margin:0 auto !important;
    }
    .topBox > nav {
        background-color:#8FB4A2 !important;
        width:96% !important;
        text-align:center !important;
        }
    .topBox > nav a{
        display:inline-block !important;
    }
}

我知道哪些媒体查询适用，哪些不适用，因为根据另一篇关于堆栈溢出的帖子，我在媒体查询规则中添加了背景颜色标识符

现在，我研究了为什么这不适用，然后使用Firebug检查浏览器中

（以及

）元素的大小，Firebug告诉我，这个插件正在读取

标签（以及

标签）的规定宽度389px

这个网站在一个月前运行得很好，那么有什么变化呢？Firefox更新为37.0.2版。这是我能想到的唯一能影响这一切的事情。没有人在网站上更新代码，代码完成后完全正常工作

我希望该网站在Firefox上看起来像在Chrome上一样（版本41.0.2272）。这个问题只适用于Firefox。在Opera、Safari和Internet Explorer上，媒体查询规则正确适用

是否有办法解决或以其他方式解决此问题？

编辑： 这里有一把小提琴。在JSFIDLE环境和Firefox浏览器中，小提琴似乎可以按预期工作

将

替换为

也适用于其他小提琴：

更新 我已经用静态图像替换了

标记，行为仍然保持不变，除了FireFox外，其他地方都很完美：

1.）哪些移动设备依赖Firefox（或此版本）。决定这是否值得关注移动优化。也；注：//在移动设备上完全准确测试的唯一方法是使用实际设备

2.）确保在两种浏览器中查看的分辨率完全相同。有些浏览器不像其他浏览器那样最小化。在您的屏幕截图中，chrome看起来更小，因此firefox可能还没有达到定义的断点。

3.）在该图像中添加唯一的选择器，并强制其获取页面。如果下面的元素没有对齐，请添加一个唯一的包装器，并对它们执行相同的操作

还有，小费！我总是喜欢使用两种宽度之间的宽度来调用我的媒体查询。可以帮助切换到这种方法，因为它更容易与IMO测试

对于浏览器测试，请尝试使用以下方法：

/* No greater than 480px, no less than 100px */
@media (max-width:480px) and (min-width:100px) {
    .foo {
        display:none;
    }
}​

---

问题似乎与使用Modernizer JavaScript函数有关，禁用此链接解决了问题

我不能肯定地告诉你为什么它工作过一次，但现在不行了，但在我的firefox中，它以不同的方式被破坏了，我认为这与你的flash对象标记的内联宽度声明为700有关。Firefox似乎在使用该选项，而忽略了媒体查询规则。@Quintile I已删除HTML中对象宽度和高度的基值，但这仍然不能改变问题。我还删除了保留图像，该图像在视频被阻止时应适用，因为该图像也有内联大小，但这也不会改变问题。我刷新了该图像，虽然它现在显示了（需要插件），但该对象现在已响应。我也使用Firefox37.0.2（pc），但站点/对象没有应用媒体查询。

元素的伸缩性非常好，但媒体查询仍然不适合我。菜单应位于宽度<400的视频下方。请在帖子中包含最小数量的HTML和CSS，以重现此问题。感谢您的回答-回复您：1）这不仅仅是针对移动设备，而是不一致性，即某个浏览器、某个大小上的某个内容看起来与应有的不一致，我在问a）这是否是一个公认的错误/小故障，b）是否有针对it2）这两种浏览器的解决方案，这两种浏览器明显低于400px宽媒体查询的规定大小，Firefox上的firebug实际上告诉了我同样多的信息，如问题中所述。另外，关于你的媒体查询建议，我的媒体查询是针对高达400px的大小，所以我真的需要添加

（最小宽度：1px）

，我不认为这是问题的原因。3）我看不出添加选择器会有多大变化，因为问题是媒体查询规则不适用于整个页面-尽管CSS规则有效，但它所在的媒体规则，没有。试试我叫媒体查询的方式。。。具有最小宽度。使用meta/mobile只能完全预览某些媒体查询。