Css 如何避免Firefox和Chrome中下划线的不同呈现？

不知何故，Firefox确实呈现了以下两个带下划线的文本，这两个文本与Chrome不同

<a href="http://www.google.de"><span style="font-size: 48pt;">Text</span></a>
<span style="font-size: 48pt; text-decoration: underline;">Text</span>

正文

对于锚元素（link），Firefox只会生成一条非常靠近文本的细线。这看起来与字体的正常下划线非常不同。另一方面，Chrome按预期使用普通下划线

我喜欢Chrome的方式，也希望在Firefox中使用它。但我怎样才能做到这一点呢

---

我有时读到人们试图通过使用border属性来模仿行为。然而，这并不完全达到正确的结果。此外，在stackoverflow上，如果您将链接悬停在较大字体上，则下划线似乎在Firefox中也能正常工作。但是我无法弄清楚他们是如何实现这个结果的。

原因是，在第一种情况下，

a

元素的字体大小是您在其他地方设置的或默认的大小（通常为12pt）。Firefox绘制下划线以匹配元素的字体大小（与您在使用just

foo

时得到的结果相同），这非常符合逻辑：宽度和垂直位置应与字体大小兼容

在给定的情况下，

a

元素除了设置了字体大小的

span

元素之外没有其他内容。然而，在文档对象模型中，

a

元素设置了一个字体大小（如果它继承了它，它将从父元素继承，而不是从子元素继承）

解决方案是确保任何带下划线的元素都在元素本身上设置了适当的字体大小（可以是专门设置的，也可以是通过继承设置的）。在本例中，您可以简单地省去

span

元素：

<a href="http://www.google.de" style="font-size: 48pt;">Text</a>

（只是一个例子，不是为了提升

style

属性，以物理单位设置字体大小，或将其设置为大值。）