媒体查询在Firefox v10中无法正常工作

Question

我一直在主样式表中使用媒体查询来根据屏幕大小加载不同的样式。一切都很正常，直到我升级到Firefox v10.0时出现了问题。现在媒体查询没有被加载进来，而且 Firefox 忽略了某些定义为百分比的宽度。

以下是我正在使用的媒体查询示例：

@media screen and (max-width: 800px) { 
body { background: #ddd; }
}

我一直可以通过缩小浏览器窗口来测试。Chrome、Safari和Opera都表现正常。IE像往常一样忽略它，但在宽度方面的表现比Firefox好。

还有其他人在使用Firefox时遇到这个问题吗？

- krazymatty

---

它似乎仍然适用于像这样的页面：http://www.quirksmode.org/css/mediaqueries.html。你有实际的测试页面吗？ - Yi Jiang

是的，您可以使用https://socialmarketingandtraining.com。如果您在Chrome和Firefox中打开此网站，您会发现Chrome会缩小...当它达到某一点时，它会将侧边栏放置在内容区域下方并隐藏特色区域。这在Firefox 9中可以使用。 - krazymatty

注意：此主题为首次访问者设置了一个 cookie，以显示不同的功能区域。您需要刷新页面才能看到我所说的功能区域。感谢您的努力。 - krazymatty

在我的Firefox和Chrome浏览器中看起来一样。但是Chrome给了我一个警告，说这个https页面包含不安全的内容。你的样式表中有任何一个是通过http服务的吗？ - robertc

你使用的是哪个版本的Firefox？在Firefox中，侧边栏是否移动到内容下方了？我不确定如何修复Chrome中的HTTPS警告。 - krazymatty

Answer 1

您在安全模式下是否看到了问题？

我猜测您安装了一些插件，这些插件在Firefox 10中被默认视为兼容，因此重新启用了它们，并且这些插件会防止您的实际浏览器视口随着浏览器窗口缩小。例如，这就意味着您应该看到位于右侧的垂直滚动条从视口中消失。您是否遇到过这种情况？

- Boris Zbarsky

---

我禁用了所有的扩展程序，然后逐个重新启用它们。罪魁祸首是Google Shortcuts 2.1.7.1。非常感谢！ - krazymatty

我将把Wappalyzer和Flagfox添加到列表中，它们似乎会破坏较小的@media查询。 - Nik

还有DownloadHelper（4.9.9）。谢谢！ - bbodien

Answer 2

我正在测试Firefox的Firebreak插件，它在小尺寸（＜524px）下破坏了响应式查询。我已将其禁用，现在查询又可以正常工作了。

- Paul