去除abbr标签引起的下划线答案

【问题标题】：Remove underlining caused by abbr tag去除abbr标签引起的下划线
【发布时间】：2014-10-09 10:51:15
【问题描述】：

我使用 <abbr> 标签来显示带有 CSS 属性 text-overflow: ellipsis 的一些修剪过的单词的完整内容。

当使用<abbr> 时，这些单词会带有一个虚线下划线，并且在悬停光标时会变成一个带问号的单词。

我确实设法使用它来更改它。但是，我不确定这是最好的方法，这种方法有什么问题吗？

abbr[title] {
  border-bottom: none !important;
  cursor: default !important;
}

【问题讨论】：

你试过text-decoration: none;吗？
IMO 的问题是您使用 <abbr> 与 语义错误。它适用于缩写，而不适用于截断的文本。就像您想更改 <h1> 一样，因为您正在使用该标签作为脚注...
我相信这更适合code review。如果它太旧而无法迁移，我相信它应该作为题外话关闭。堆栈溢出是问题答案，而不是问题建议。

标签： html css abbr

【解决方案1】：

从 v40 Firefox switched 开始使用 text-decoration 来提供下划线和 chromium 将是 doing it that way too。因此，如果您需要支持这些浏览器，您应该更新您的代码以包括：

abbr[title] {
  border-bottom: none !important;
  cursor: inherit !important;
  text-decoration: none !important;
}

【讨论】：

【解决方案2】：

它设置了一个边框和text-decoration。删除它：

border: none;
text-decoration: none;

示例：jsfiddle

【讨论】：

【解决方案3】：

这应该可行：

abbr[title] {
  text-decoration: none;
}

【讨论】：

【解决方案4】：

abbr[title] {cursor: default !important;}

【讨论】：

答案已经在下面了，你重新写一遍就好了。
@Joseph 仅代码的答案可能不是一个好的答案，但它仍然是一个答案。我会向你推荐这篇关于 LQPRQ 的帖子：You're doing it wrong: A plea for sanity in the Low Quality Posts queue

【解决方案5】：

用abbr[title] {text-decoration: none !important;}删除它

【讨论】：