html - 去除abbr标签引起的下划线

Question

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

使用<abbr>这些词时，得到一个虚线下划线，悬停光标变为带问号的。

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

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

score 72 · Accepted Answer

从 v40 开始，Firefox切换到使用 text-decoration 来提供下划线，并且 chromium 也将这样做。因此，如果您需要支持这些浏览器，您应该更新您的代码以包含该代码：

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

score 10 · Accepted Answer

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

border: none;
text-decoration: none;

示例：jsfiddle

score 6 · Accepted Answer

6

这应该有效：

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

于 2016-08-29T03:08:39.733 回答

score 0 · Accepted Answer

0

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

于 2017-01-11T05:11:17.300 回答

score 0 · Accepted Answer

0

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

于 2021-07-11T18:08:57.497 回答

5 回答 5