CSS 媒体查询不适用于 Firefox 37

Question

我在一个网站上工作（最初是在其他地方设计的）添加 CSS 媒体查询来调整布局以使其更适合移动设备。

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

一些注意事项：

网站是http://www.stablesathenhampark.com
该网站在完成时（2015 年 4 月中旬）在所有浏览器上都按预期运行
此问题仅出现在 Firefox 上。

问题：

如您所见，在 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;
    }
}

我知道哪些媒体查询适用，哪些不适用，因为我根据 Stack Overflow 上的另一个 post 向媒体查询规则添加了背景颜色标识符。

现在，我研究了为什么这不适用，因此使用 Firebug 检查浏览器中 <body>（以及 <html>）元素的大小，确定Firebug 告诉我这个插件正在读取 <body> 标签（和 <html> 标签）的规定宽度为 389px。

这个网站在一个月前运行良好，现在发生了什么变化？ Firefox 将自身更新为 版本 37.0.2。这是我能想到的唯一会影响这一点的东西。没有人更新网站上的代码，完成后就可以正常工作了。

我希望网站在 Firefox 上的显示效果与在 Chrome（版本 41.0.2272）上的显示效果相同。此问题仅适用于 Firefox。在 Opera、Safari 和 Internet Explorer 上，媒体查询规则正确应用。

有什么方法可以解决或解决这个问题吗？

编辑： fiddle 在这里：https://jsfiddle.net/5hqvm8c7/。 fiddle 似乎在 JSFiddle 环境和 Firefox 浏览器中按预期工作。

将 <object> 替换为 <img> 也适用于另一个 fiddle： https://jsfiddle.net/ow0yjmmc/1/

更新

我已经用静态图像替换了 <object> 标签，行为仍然保持不变，除了 FireFox 之外其他地方都很完美：

http://www.stablesathenhampark.com/indexNew.php

Answer 1

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

Answer 2

问题似乎与使用 modernizr JavaScript 功能有关，禁用此 link 解决了问题。

CSS 媒体查询不适用于 Firefox 37

CSS media query does not apply to Firefox 37

css

firefox

media-queries

更新