不知何故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>
对于锚元素（链接），Firefox只会生成一条非常细的线，非常靠近文本。这看起来与字体的正常下划线非常不同。另一方面，Chrome会按预期使用正常的下划线。
我喜欢Chrome的方式，并希望在Firefox中使用它。但是我怎么能实现这个目标呢？
我有时会读到人们试图通过使用border-property来模仿行为。但是，这并没有完全达到正确的结果。此外，如果您使用更大的字体悬停链接，则在stackoverflow上，即使在Firefox中，下划线似乎也能正常工作。但我无法弄清楚他们是如何取得这一成果的。
答案 0 :(得分：3)
原因是在第一种情况下，a元素的字体大小是您在别处设置或默认的任何字体（通常为12pt）。 Firefox绘制下划线以匹配元素的字体大小（与您仅使用<u>foo</u>获得的相同），这是相当合乎逻辑的：宽度和垂直位置应与字体大小兼容。
在他给出的情况下，a元素没有其他内容，只有span元素，其上设置了字体大小。然而，在文档对象模型中，a元素在其上设置了字体大小（如果它继承了它，它继承自父级，永远不会从子级继承。）
解决方案是确保任何带下划线的元素在元素本身上具有适当的字体大小（在其上专门设置或通过继承）。在示例中，您可以简单地省略span元素：
<a href="http://www.google.de" style="font-size: 48pt;">Text</a>
（只是一个例子，不是为了宣传style属性，以物理单位设置字体大小，或将它们设置为巨大值。）