字体标签悬停在 Firefox 上不起作用，但在 chrome 上正常工作答案

【问题标题】：Font tag hover not working on firefox, but works normal on chrome字体标签悬停在 Firefox 上不起作用，但在 chrome 上正常工作
【发布时间】：2018-12-26 14:59:29
【问题描述】：

由于某种原因，悬停在我的 Firefox 字体标签中不起作用，它在 chrome 上正常工作，但在 Firefox 中不起作用。如果我尝试悬停另一个标签（例如按钮和 div），它会按预期工作。我正在使用 Firefox 64.0

以下是 codepen 中的示例：https://codepen.io/luansergiomattos/pen/MZoMPX

<body>
    <div class="header__account">
        <button class="header__font">
            <font  class="header__font">LOGIN</font>
        </button>

        <button>
            <font class="header__font">REGISTER</font>
        </button>
    </div>
</body>

css

 .header__font:hover {
    animation: 0.5s ease-out 0s 1 forwards highlight;

  }

  .header__font::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -7px;
    background: red;
    visibility: hidden;
    border-radius: 5px;
    transform: scaleX(0);
    transition: 0.25s linear;
  }

  .header__font:hover::before {
    visibility: visible;
    transform: scaleX(1);
  }

.header__font:focus::before {
    visibility: visible;
    transform: scaleX(1);
  }
}

对不起，如果我的代码中有很多东西，我只是从我正在工作的项目中复制过来的

我该如何解决这个问题？

【问题讨论】：

你为什么使用这个obsolete和史前标签？你检查browser compatibility了吗？
这是 FF 的 15 岁错误/奇怪行为。它们不会冒泡
When hovering over a child element in firefox的可能重复
啊，是的，你的更好，谢谢@ksav（即使 FF 暴露了与相同的行为...）
感谢 cmets

标签： html css

【解决方案1】：

这可能对你有帮助...

div.header__font:hover {
    animation: 0.5s ease-out 0s  forwards highlight;
}

【讨论】：

你是否将它应用到所有悬停在你的css中？

【解决方案2】：

根据here HTML5 不支持字体标签，我建议您必须更改您的代码。

但是，我发现下面的编码是有效的。

<div class="header__account">
    <button class="header__font">
        LOGIN
    </button>
    <button  class="header__font">
        REGISTER
    </button>
</div>

【讨论】：

谢谢，但我需要在按钮内添加另一个元素来控制 de 大小