将锚标记包裹在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的CSS更改为

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>