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

Posted 2023-03-05

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

【英文标题】：Wrapped anchor tag around inline-flex container - text not underlined in Firefox

【发布时间】：2020-10-06 23:16:36

【问题描述】：

我正在尝试在锚标记内嵌套一个 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>

【问题讨论】：

我认为在a 中添加div 不是一个好方法。你应该使用span，我使用的是chrome，我没有看到下划线：jsfiddle.net/Manju06/8fxcyr91/67

你想显示下划线还是从 chrome 中删除它？

在 html5 中，您可以将锚点包裹在 div 周围（段落、部分等）。@Gagandeep Singh 我也想在 Firefox 中保留下划线

【参考方案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>

【讨论】：

谢谢，但这并不能回答我的问题为什么会这样:)

这很可能发生，因为如果您检查 chrome 中的 <a> 标签，您可以看到 chrome 正在使用以下规则将其默认样式添加到所有锚标签 a:-webkit-any-link color: -webkit-link; cursor: pointer; text-decoration: underline; 这是为什么内部 div 通过从锚标记继承下划线的属性来显示下划线，如果您在 Firefox 中看到相同的内容，则它没有将任何用户代理样式应用于锚标记。