Javascript 为什么汉堡包菜单不能在Firefox中正确显示，不能在一个页面上打开？

我有几页。在所有菜单页面上，汉堡都能正常工作，主页除外。在主页上，汉堡包菜单没有打开，尽管javascript无处不在，我检查了一下。此外，在浏览器Firefox中，最后一个比应该的低很多，尽管在其他浏览器中，所有内容都正确显示。可能是什么错误

if（窗口中的“ontouchstart”）{
var click='touchstart'；
}否则{
var click=‘click’；
}
$（'div.burger'）。打开（单击，函数（）{
if（！$（this）.hasClass（'open'））{
openMenu（）；
}否则{
关闭菜单（）；
}
});
$（'div.menu ul li a'）。打开（单击，函数（e）{
e、 预防默认值（）；
关闭菜单（）；
});
函数openMenu（）{
（document.getElementById（“see”）.setAttribute（“样式”，“显示：块；z索引：30；”）；
$（'div.burger'）.addClass（'open'）；
$（'div.x，div.z'）.addClass（'collapse'）；
setTimeout（函数（）{
$（'div.y'）.hide（）；
$（'div.x'）.addClass（'rotate30'）；
$（'div.z'）.addClass（'rotate150'）；
}, 70);
setTimeout（函数（）{
$（'div.x'）.addClass（'rotate45'）；
$（'div.z'）.addClass（'rotate135'）；
}, 120);
}
函数关闭菜单（）{
$（'.menu li'）.removeClass（'animate'）；
（document.getElementById（“see”）.setAttribute（“样式”，“显示：无；z索引：20；”）；
setTimeout（函数（）{
$（'div.burger'）.removeClass（'open'）；
$（'div.x'）.removeClass（'rotate45'）.addClass（'rotate30'）；
$（'div.z'）.removeClass（'rotate135'）.addClass（'rotate150'）；
$（'div.menu-bg'）.removeClass（'animate'）；
setTimeout（函数（）{
$（'div.x'）.removeClass（'rotate30'）；
$（'div.z'）.removeClass（'rotate150'）；
}, 50);
setTimeout（函数（）{
$（'div.y'）.show（）；
$（'div.x，div.z'）。removeClass（'collapse'）；
}, 70);
}, 100);
}

.container\u头{
背景：url（../img/img1.jpg）顶部中心不重复；
位置：相对位置；
背景尺寸：封面；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景附件：固定；
高度：960像素；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-o-用户选择：无；
用户选择：无；
}
.货柜头a{
浮动：左；
颜色：#000；
文本对齐：居中；
填充：12px；
文字装饰：无；
字号：18px；
线高：25px；
边界半径：10px；
}
.名字{
字体大小：7.5rem；
颜色：#000；
位置：绝对位置；
利润率最高：7%；
左边缘：52%；
z指数：1；
}
.姓p{
左边距：50像素；
}
.导航{
显示：块；
}
.导航a{
位置：固定；
z指数：10；
左：-278px；
过渡：0.3s；
宽度：310px；
颜色：#000000；
边框：1px纯黑；
利润率最高：27%；
填充：15px；
字体大小：24px；
文字装饰：无；
线高：40px；
文本对齐：居中；
}
@媒体屏幕和（最大宽度：1024px）和（最小宽度：381px）{
.视差{
背景附件：滚动条；
}
.菜单{
显示：无；
背景图像：url（../img/Фббб.png）；
身高：100%；
位置：相对位置；
z指数：20；
}
汉堡{
高度：30px；
宽度：40px；
位置：绝对位置；
顶部：11px；
左：21px；
z指数：30；
}
第x分部，
y组，
z区{
位置：绝对位置；
保证金：自动；
顶部：0px；
底部：0px；
背景：#000；
边界半径：2px；
-webkit过渡：所有200毫秒的速度都变慢；
-o型过渡：所有200ms的减速；
过渡：所有200毫秒的速度都变慢；
}
第x分部，
y组，
z区{
高度：3倍；
宽度：26px；
}
y组{
顶部：18px；
}
z区{
顶部：37像素；
}
部门崩溃{
顶部：20px；
-webkit过渡：所有70毫秒的缓变；
-o型过渡：所有70毫秒的缓解；
过渡：所有70毫秒都放松；
}
第30部分{
-ms变换：旋转（30度）；
-webkit变换：旋转（30度）；
变换：旋转（30度）；
-webkit过渡：所有50ms都可以轻松过渡；
-o-过渡：所有50ms的缓变；
过渡：所有50毫秒都放松；
}
第150部分{
-ms变换：旋转（150度）；
-webkit变换：旋转（150度）；
变换：旋转（150度）；
-webkit过渡：所有50ms都可以轻松过渡；
-o-过渡：所有50ms的缓变；
过渡：所有50毫秒都放松；
}
第45分区{
-ms变换：旋转（45度）；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
-webkit过渡：所有100毫秒的缓变；
-o型过渡：所有100毫秒的缓变；
过渡：所有100毫秒的速度都会变慢；
}
第135分区{
-ms变换：旋转（135度）；
-webkit变换：旋转（135度）；
变换：旋转（135度）；
-webkit过渡：所有100毫秒的缓变；
-o型过渡：所有100毫秒的缓变；
过渡：所有100毫秒的速度都会变慢；
}
div.menu-bg{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
-webkit转换：所有300ms立方贝塞尔（0.000,0.995,0.990,1.000）；
-o型过渡：所有300ms立方贝塞尔（0.000,0.995,0.990,1.000）；
过渡：所有300ms立方贝塞尔（0.000,0.995,0.990,1.000）；
}
}

正文
正文

不同的浏览器对html元素的边距和填充有不同的标准“设置”。这可能是因为您的菜单没有正确显示，正如@KevinTinnemans所说的-我建议从

x，y，z

类中删除

margin:auto

。你不需要它，因为你是绝对定位元素。然后，只需使用

top

值即可移动它们。这在所有浏览器中都应该保持一致Mayer@Alexandra那没关系，因为你