不知何故，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中，下划线似乎也能正常工作 . 但我无法弄清楚他们是如何实现这一结果的 .
1 回答
原因是在第一种情况下，
a元素的字体大小是您在别处设置或默认的任何字体（通常为12pt） . Firefox绘制下划线以匹配元素的字体大小（与您将获得的相同，例如仅使用<u>foo</u>），这是相当合理的：宽度和垂直位置应与字体大小兼容 .在他给出的情况下，
a元素没有其他内容，只有span元素，其上设置了字体大小 . 但是，在文档对象模型中，a元素在其上设置了字体大小（如果它继承了它，则它继承自父级，永远不会从子级继承） .解决方案是确保任何带下划线的元素在元素本身上具有适当的字体大小（在其上专门设置或通过继承） . 在示例中，您可以简单地省略
span元素：（只是一个例子，不是为了宣传
style属性，以物理单位设置字体大小，或将它们设置为巨大值 . ）