为什么我对 table 的媒体查询在 chrome 中有效，但在 Firefox 中无效？

Question

我正在设计一个带有媒体查询的自定义菜单栏，以便它具有响应能力，并且它适用于 chrome 和 safari，但不适用于 firefox。我已经尝试使用 class、id、classes 的层次结构，但是无论我做什么，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%;
}}

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

Answer 1

这是因为您使用了 2 个选择器来声明 Table:

第一名：

table#Table_01 第 563 行

然后

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

所以都与特异性有关，查看HERE and HERE了解更多信息

编辑

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

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

2nd:改speelwidth,把.speel {width:172px}改成.speel {width:100%}`