如何使 `text-decoration: underline` 在浏览器中看起来一样？答案

【问题标题】：How can I make `text-decoration: underline` looks the same across browsers?如何使 `text-decoration: underline` 在浏览器中看起来一样？
【发布时间】：2021-10-27 00:54:06
【问题描述】：

这是我使用的 CSS 代码：

a {
text-decoration: underline dashed;
}

而且你可以在这里看到它在不同浏览器上的显示方式不同：

在 Mozilla 上：

关于勇敢：

在 Chrome 上：

如何使外观保持一致？

【问题讨论】：

你说过文本需要在评论中包含在一个 div 中。但是，这需要在原始问题中。
您的问题显示了不太可能跨行拆分的单个单词。在这些情况下，给出的一些简单答案将起作用。但是，除非在有限的情况下，您的问题目前无法仅使用 CSS 来解决。例如，css-tricks.com/styling-underlines-web 对此进行了讨论。要获得一个完全通用的解决方案，您需要 JS 并且需要更改 HTML。

标签： css underline

【解决方案1】：

你可以使用下面的代码

a
{
text-decoration-thickness: 2px;
}

【讨论】：

【解决方案2】：

因为每个浏览器都有自己独特的 HTML 和 CSS 显示方式，您可以使用类似的方式

.dash.underline {
  text-decoration: none;
  background-image: linear-gradient(to right, #000 75%, transparent 75%);
  background-position: 0 1.04em;
  background-repeat: repeat-x;
  background-size: 8px 3px;
}

&lt;p class="dash underline"&gt;See it works!&lt;/p&gt;

您可以在webfx.com 阅读为什么您的文本装饰或任何其他内容在不同浏览器之间看起来不同

您也可以查看Underline.js，他们在下划线和其他内容方面做得非常好。 Underline.js GitHub

【讨论】：

border-bottom 的问题是我需要将文本包装在另一个 div 中（如果没有，任何具有填充的文本都不会在文本下方显示底部边框）。理想情况下，我想避免添加另一个 div
这个解决方案（它的优点是不需要边框底部但有几个其他问题）如果文本换行超过一行，或者如果有填充，或者如果文本是在一个比 itlf 更广泛的元素中。遗憾的是，这不是一个通用的解决方案。

【解决方案3】：

有很多方法可以在不使用text-decoration: underline 的情况下为文本添加下划线。一种方法是使用底部边框。

首先为所有你想要下划线的文本创建一个 CSS 类。应该这样做：

.dashed_underline {
border-bottom: 3px black dashed;
}

然后将此类应用到您想要的段落元素：

<p class="dashed_underline">This text has a dashed underline</p>

您应该会发现下划线现在在不同的网络浏览器中看起来是一样的。

【讨论】：

我不明白为什么这是一个解决方案 - 如果元素没有填充但看起来与普通文本下划线不同（就它如何处理下降），如果在上面的示例中，文本不止一行，它只是在最后一行“下划线”。
@AHaworth 它创建了一种下划线。
同意，在某些情况下会有所帮助，但这不是通用解决方案。例如，如果文本位于比其自身更宽的元素中，或者如果有填充，或者如果有不止一行。也许这些限制可以在你的答案中列出，这样人们就知道它正在解决问题的哪一部分，并且他们可以判断它是否适合他们。