为什么我对表格的媒体查询可以在 chrome 中使用，而不是在 firefox 中使用？答案

【问题标题】：Why do my media queries for a table work in chrome but not firefox?为什么我对表格的媒体查询可以在 chrome 中使用，而不是在 firefox 中使用？
【发布时间】：2015-03-13 01:51:49
【问题描述】：

我正在设计一个带有媒体查询的自定义菜单栏，以便它具有响应性，它适用于 chrome 和 safari，但不适用于 Firefox。我尝试过使用类、id、类的层次结构，但无论我做什么，firefox 都不想正确显示它。

您可以在此处查看问题：http://wanagogo.com （检查元素以查看 html）

这些是当前在 chrome 中工作的查询：

@media (max-width: 1200px) {
.kidsnav {
width: 900px;
}}
@media (max-width: 1024px) {
.kidsnav {
width: 700px;
}}
@media (max-width: 800px) {
.kidsnav {
width: 520px;
}}
@media (max-width: 600px) {
.kidsnav {
width: 97%;
}}
@media (max-width: 480px) {
.kidsnav {
width: 90%;
}}

我错过了什么吗？任何指导将不胜感激！

【问题讨论】：

在 Firefox 34 中为我工作。
所以当您转到该链接时，顶部的橙色/黄色菜单会在您缩小浏览器宽度时正确调整大小？
我的立场是正确的。顶部菜单不会在 Firefox 中调整大小。但是，如果我将添加 .kidsnav img { width:100%; } 添加到您现有的 CSS 中，它会起作用。
可能与Bug 975632有关。
另外，Responsive images in tables 和/或 Why do Firefox and Opera ignore max-width 可能重复。

标签： css google-chrome firefox media-queries

【解决方案1】：

这是因为您使用 2 个选择器来声明表：

第一个：

table#Table_01 在第 563 行

然后

.kidsnav 在第 560、567、571、575 和 579 行（由于您的媒体查询而重复）。

所以这一切都与特异性有关，请查看 HERE 和 HERE 了解更多信息

编辑

要使您的菜单具有响应性，您必须在 CSS 中至少做两件事：

第一个：添加.kidsnav img {width:100%}

第二次： 更改 speel width，而不是 .speel {width:172px} 更改为 .speel {width:100%} `

【讨论】：

对不起，我刚刚添加了这一点，以试图在我写这个问题时纠正它。添加它不起作用，删除它不起作用。它现在被删除了。不过，您可能是对的，它与特异性有关。将进行调查。