Question

我正在开发一个网站（最初在其他地方设计），添加CSS媒体查询以调整布局，使其更具移动性。

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

一些注意事项：

网站为http://www.stablesathenhampark.com
该网站在完成后（2015年4月中旬）在所有浏览器上按预期工作
此问题在Firefox上仅显示。

问题：

enter image description here

正如您所看到的，在Chrome上，CSS会根据需要重新调整视频下方的菜单。在Firefox上它没有，保持在视频旁边，因为它应该在更大的浏览器宽度。这两个浏览器是完全相同的页面，完全相同的时间，彼此相邻。

我花了很多时间研究各种媒体查询，并发现Firefox似乎没有应用某个媒体查询if width < 400px

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

@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上的其他帖子向媒体查询规则添加了背景颜色标识符。

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

这个网站一个月前完美运作，所以改变了什么？ Firefox将自身更新为版本37.0.2 。这是我能想到的唯一会影响这一点的东西。没有人更新网站上的代码，并在完成后完全正常工作。

我希望网站能够在Chrome浏览器上看到它（版本41.0.2272 ）。此问题仅适用于Firefox。在Opera，Safari和Internet Explorer上，媒体查询规则正确应用。

我有办法解决这个问题吗？

编辑：这里有一个小提琴：https://jsfiddle.net/5hqvm8c7/。这个小提琴看起来像在JSFiddle环境和Firefox浏览器中看到的那样工作。

用<object>替换<img>也适用于另一个小提琴： 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函数，禁用此链接可以解决问题。

CSS媒体查询不适用于Firefox 37

更新

2 个答案: