CSS 和 Firefox 的行为与其他浏览器不同的问题答案

【问题标题】：Problem with CSS and Firefox acting different than other browsersCSS 和 Firefox 的行为与其他浏览器不同的问题
【发布时间】：2021-10-18 22:49:52
【问题描述】：

我有一个奇怪的问题，我似乎无法弄清楚，我已经覆盖了论坛，甚至结合了 CSS 类，以查看 Firefox 是否可以使用 :hover 效果，但没有成功，它只是不工作。它确实可以在 IE 和 Edge 中运行，但不能在 Firefox 中运行。如果有任何帮助，我们将不胜感激。

这就是我们所拥有的：

.footer-social-icons {
 float: left;
 margin-top: 70px;
 margin-left: -170px;
}
span.social-icons{
    vertical-align: top;
    display: inline;
    height: 100px;
    color: #fff;
    text-decoration: none;
}
span.ourfacebook:before {
font-family: "Font Awesome 5 Brands";
    content: "\f39e";
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
span.ourfacebook:hover:before{
    background-color: #3d5b99;
    content: "\f39e";
}

这是我们的 CSS，现在是 html

<div class="footer-social-icons">
<a target='_blank' href='$social_site_facebook'><span class='ourfacebook social-icon'></span></a>
</div>

任何帮助将不胜感激！

.footer-social-icons {
 float: left;
 /*  margin-top: 70px;
margin-left: -170px; */
}

span.social-icon {
    vertical-align: top;
    display: inline;
    height: 100px;
    color: #ccc;
    text-decoration: none;
}

.ourfacebook:before {
font-family: "Font Awesome 5 Brands";
    content: "\f39e";
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
span.ourfacebook:hover:before{
    background-color: #3d5b99;
    content: "\f39e";
}

<div class="footer-social-icons">
<a target='_blank' href='$social_site_facebook'><span class='ourfacebook social-icon'></span></a>
</div>

【问题讨论】：

你想要的结果是什么？
你能提供可测试的演示吗？
您的 .social-icons 类不存在，所以我将其设为社交图标。只要删除了负边距，悬停就可以在 Firefox 中使用，但仍然不确定您的意图是什么。
问题是悬停在 Firefox 中不起作用，它在 ie 和 edge 中起作用，但在 firefox 中不起作用
@MrX 悬停效果很好......

标签： css firefox

【解决方案1】：

它在我的Firefox浏览器上运行良好..可能是您的浏览器版本旧尝试更新它。

【讨论】：

在获得 50 声望之前我无法发表评论