为什么我的媒体查询表工作在chrome但不是firefox？

Question

我正在设置一个带有媒体查询的自定义菜单栏，以便它具有响应性，并且它可以在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%;
}}

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

Answer 1

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

第一

第563行

table#Table_01

然后

.kidsnav第560,567,571,575行＆amp; 579（由于您的媒体查询而重复）。

所有这些都与特异性相关，请检查HERE和 HERE 以获取更多信息

修改

要使菜单响应，您必须在CSS中至少完成两件事：

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

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