CSS 媒体查询不适用于 Firefox 37答案

【问题标题】：CSS media query does not apply to Firefox 37CSS 媒体查询不适用于 Firefox 37
【发布时间】：2015-07-25 03:12:51
【问题描述】：

我正在开发一个网站（最初是在其他地方设计的）添加 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 上的另一篇文章在媒体查询规则中添加了背景颜色标识符。

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

这个网站一个月前运行良好，那么有什么变化？ Firefox 将自身更新到版本 37.0.2。这是我认为唯一会影响这一点的事情。没有人更新网站上的代码，完成后它可以正常工作。

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

有什么办法可以解决或解决此问题？

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

用<img> 替换<object> 也适用于另一个小提琴： https://jsfiddle.net/ow0yjmmc/1/

更新

我已将<object> 标记替换为静态图像，并且行为仍然保持不变，除了 FireFox 之外的任何地方都很完美：

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

【问题讨论】：

我不能肯定地告诉你为什么它曾经工作过一次而不是现在，但它在我的 firefox 中以不同的方式被破坏了，我认为它与你的 flash 对象标签有关声明为 700 的内联宽度。Firefox 似乎使用它并忽略媒体查询规则。
@Quintile 我已经删除了 HTML 中对象宽度和高度的基本值，但这仍然不会改变问题。我还删除了如果视频被阻止应该应用的保留图像，因为它也有内联尺寸，但这也不会改变问题。
我刷新了，虽然它现在显示（需要插件），但该对象现在是响应式的。 Firefox 37.0.2 for Mac。
我也在使用 Firefox 37.0.2 (pc)，但是站点/对象没有应用媒体查询。 <object> 元素可以完美缩放，但媒体查询仍然对我不起作用。菜单应位于宽度
请在帖子中包含最少量的 HTML 和 CSS，以便在此处重现问题。

标签： css firefox media-queries

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的回答 - 回复您：1) 这不仅仅是仅适用于移动设备，而是在一个浏览器上看起来不应该的不一致，在一个尺寸，我在问a）这是否是一个公认的错误/故障，b）是否有解决方法
2) 两种浏览器都明显低于 400 像素宽媒体查询的规定尺寸，而 Firefox 上的萤火虫实际上告诉了我很多，如问题中所述。
另外回复：您的媒体查询建议，我的媒体查询是针对 UPTO 400px 的大小，所以我真的需要设置一个 (min-width:1px) 补充，我认为这不是问题的原因.
3) 我看不出添加选择器会有什么变化，因为问题是媒体查询规则不适用于整个页面 - 而 CSS 规则 可以工作，它所在的媒体规则不工作。
尝试我调用媒体查询的方式......使用最小宽度。某些媒体查询只能通过 meta / mobile 完全预览。