围绕 inline-flex 容器包裹的锚标记 - Firefox 中的文本没有下划线

Question

我正在尝试在锚标记内嵌套一个 inline-flex 容器（IE11 让我这样做了）。 不幸的是，例如，与 Chrom 相比，我在 FireFox 上得到了不同的结果。 在 Chrom 上，文本仍然带有下划线，而 FF 根本不会在底部画线。

知道为什么它会这样工作吗？

 a{ color: red; }.flex{ display: inline-flex; /* display: flex; */ -> will show the underline }

 <a href="www.google.com"> <div class="flex">Text inside wrapper</div> </a>

Answer 1

如果您希望下划线也出现在 firefox 中，那么只需尝试将 .flex 的.flex更改为

 a{ color: red; }.flex{ display: inline-flex; text-decoration:underline; /* display: flex; */ -> will show the underline }

 <a href="www.google.com"> <div class="flex">Text inside wrapper</div> </a>