Question

您可以使用css设置<abbr>标记的样式吗？在Firefox中，它会在下面的单词下面显示点，如下图所示：
enter image description here

这是浏览器的浏览器吗？你可以删除这些点，还是只使用title="title here"选项？感谢

Answer 1

Firefox 40的变化很小：

https://developer.mozilla.org/en-US/Firefox/Releases/40/Site_Compatibility#CSS

要删除Firefox中的默认下划线，您现在需要设置CSS：

text-decoration: none;

Answer 2

您可以使用css设置标记样式吗？

是的，你可以。
在Firefox中，它会在单词
下面显示点
是。 Firefox的默认样式是
```
abbr[title], acronym[title] {
    border-bottom: 1px dotted;
}
```
这是浏览器的浏览器吗？

是的，此行为由每个浏览器的默认样式表决定。然后，默认情况下，不同的浏览器可能会显示不同的内容。
你可以删除这些点吗？

是的，只需覆盖默认的syle：
```
abbr[title], acronym[title] {
    border-bottom: none;
}
```

Answer 3

可以使用CSS为现代浏览器设置标记样式。但是，可以使用带有JavaScript的旧浏览器的后备。（但谁想支持IE 8？）

abbr {
position: relative;
}

abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(title);
}

当标记悬停在标记上时，这将使用标题中的属性内容在标记的右上角添加一个绝对定位的伪元素。

Answer 4

先生。 Bunnyman。

好像您遇到了跨浏览器问题。

是的，您可以设置<abbr>标记的样式。示例如下。

abbr { border: 2px dashed red; }

如果您在某个浏览器上遇到下划线，请尝试：

abbr { border-bottom: 0px !important; }

Answer 5

您可以使用CSS为<abbr>标签设置样式吗？

是的，但是您不能设置title属性的样式-尽管您可以fake it不可靠。

这是按浏览器浏览的东西吗？

是的，默认样式是在用户代理样式表中设置的。

可以去除点吗？

绝对。要删除它们，请在样式表中取消设置text-decoration property：

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

包容性设计方法是also possible。

Answer 6

您可以使用CSS设置任何HTML元素的样式，问题是，对于某些HTML元素，无法对其进行样式化。

换句话说，您可以将CSS添加到您想要的任何内容中，但浏览器可能不支持您的更改。
即可以为<head>元素设置样式，但这没有意义。

你能设计一个<abbr>标签吗？</abbr>

6 个答案: