css - 为什么我对表格的媒体查询在 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 个选择器来声明表:

第一:

table#Table_01 第 563 行

然后

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

所以都和Specificity有关，查一下HERE和 HERE 了解更多信息

编辑

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

1st: 添加.kidsnav img {width:100%}

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