Html 使safari和Firefox的CSS外观相同

我是网络开发新手，在设计它的样式时，我使用了Chrome作为参考。我的一些功能在safari和firefox中不起作用-例如，下拉列表（联系人和库存商）只会在chrome中单击打开，而不会在其他浏览器中打开。我添加了-moz-and-webkit-PREFIX，但仍然不起作用。我还试图更改firefox和safari的字体大小，但这也行不通。我用这个属性改变了一些其他元素，比如crossfade图像动画，它不工作不确定我做错了什么，近年来找不到答案。此外，firefox不会识别中文文本的根字体，但safari和chrome可以工作。 它在chrome中的外观->

它在firefox中的外观->

HTML+CSS

@font-face{
字体系列：Hiragino Sans GB；
src:url（“//db.onlinewebfonts.com/t/3f086dbc376893f56b4a9c4d3cac5df9.eot”）；
}
：根{
--grCol1:rgb（247245245）；
--grCol2:#ffffff；
--grCol3:rgb（236235）；
--grCol4:rgb（247245245）；
--svg:rgb（204201201）；
--梯度：径向梯度（var（--grCol1）、var（--grCol3）、var（--grCol4））；
}
html{
滚动行为：平滑；
填充：0；
-moz字体大小：10px；
-webkit字体大小：15px；
字体大小：16px；
字体大小调整：0.5；
}
.联系方式{
位置：相对位置；
顶部：5vh；
右：0；
字体系列：Helvetica，无衬线；
高度：10vh；
字母间距：3px；
}
.联系电话{
颜色：白色；
文本转换：大写；
字体大小：1.5rem；
字体大小：粗体；
背景：无；
边界：无；
文字装饰：无；
光标：指针；
大纲：无；
}
.contactbtn:悬停{
不透明度：0.6；
}
.联系ul，
.联系美国保险商协会{
位置：绝对位置；
左：-10vw；
边缘顶部：20px；
宽度：300px；
高度：150像素；
字体大小：1.5rem；
字体大小：粗体；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：柔性端；
列表样式：无；
文本转换：大写；
字号：1rem；
不透明度：0；
转换：translateY（-10px）；
过渡：所有0.4s缓解；
-webkit转换：translateY（-10px）；
-webkit过渡：所有0.4s易用性；
-moz变换：translateY（-10px）；
-moz过渡：所有0.4s易用性；
}
.联系a，
.联系{
颜色：黑色；
文字装饰：无；
}
.联系a:悬停，
.联系人a：悬停{
/*不透明度：0.6*/
背景色：var（--grCol3）；
}
.联系人BTN:focus+ul{
不透明度：1；
指针事件：全部；
变换：translateY（0）；
-moz变换：translateY（0）；
-webkit转换：translateY（0）；
大纲：无；
}
/*关于页面联系人*/
.联络-a{
位置：绝对位置；
顶部：5vh；
左：5vw；
字体系列：Helvetica，无衬线；
高度：10vh；
字母间距：3px；
颜色：var（--grCol3）；
}
.联系美国保险商协会{
调整项目：灵活启动；
左：0；
}
/*关于页面*/
.关于集装箱{
/*边框：纯色2倍紫色*/
宽度：90vw；
高度：100vh；
位置：绝对位置；
排名：0；
/*左：-90vw*/
盒影：10px 0px 10px 1px#aaaaa；
}
.text节{
宽度：35vw；
高度：90vh；
位置：相对位置；
顶部：5vh；
左：47vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
/*边框：纯色2倍紫色*/
}
.关于{
位置：绝对位置；
宽度：100%；
身高：100%；
框大小：边框框；
过渡：所有1；
文本缩进：1.5em；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
填充：4rem2rem；
}
.透明{
不透明度：0；
}
英格{
字体系列：Helvetica，无衬线；
字体大小：粗体；
字号：1.1rem；
线高：1.6；
文本对齐：对齐；
颜色：黑色；
}
.普通话{
字体系列：Hiragino Sans GB；
-moz字体系列：Hiragino Sans GB；
字号：1.1rem；
线高：2；
文本对齐：对齐；
文本转换：大写；
字体大小：粗体；
颜色：黑色；
填充：3rem；
}
兰奇先生{
位置：绝对位置；
字号：2rem；
左：84vw；
顶部：88vh；
颜色：黑色；
背景：无；
边界：无；
文字装饰：无；
光标：指针；
大纲：无；
}
.langChange:悬停{
不透明度：0.6；
变换：translateY（5px）；
}
.零售商{
位置：相对位置；
显示：内联；
顶部：-85vh；
右图：-20vw；
字体系列：Helvetica，无衬线；
高度：10vh；
字母间距：3px；
}
斯托克伊斯特先生{
颜色：白色；
文本转换：大写；
字体大小：1.5rem；
字体大小：粗体；
背景：无；
边界：无；
文字装饰：无；
光标：指针；
大纲：无；
}
.stockistbtn:悬停{
不透明度：0.6；
}
美国证券商协会{
位置：绝对位置；
左：-9vw；
利润上限：-5vh；
宽度：300px；
高度：150像素；
字体大小：粗体；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：柔性端；
列表样式：无；
文本转换：大写；
字号：1rem；
不透明度：0；
指针事件：无；
转换：translateY（-10px）；
-moz变换：translateY（-10px）；
-webkit转换：translateY（-10px）；
过渡：所有0.4s缓解；
-moz过渡：所有0.4s易用性；
-webkit过渡：所有0.4s易用性；
}
.证券商{
颜色：var（--grCol3）；
文字装饰：无；
}
.股票经纪人p:悬停{
背景色：黑色；
}
.stockistbtn:focus+ul{
不透明度：1；
指针事件：全部；
变换：translateY（0）；
-moz变换：translateY（0）；
-webkit转换：translateY（0）；
大纲：无；
}
#交叉衰落{
位置：绝对位置；
排名：0；
左：0；
宽度：40vw；
高度：100vh；
z指数：-10；
背景尺寸：封面；
动画：关于线性16秒无限衰减；
-webkit动画：关于线性16秒无限衰减；
-moz动画：关于线性16秒无限衰减；
}
@关键帧逐渐衰减{
0% {
背景图像：url（“/img/Home/updated\trait_150dpi.jpg”）
}
25% {
背景图片：url