logo标签列表

你能给 <abbr> 标签添加样式吗？

htmlabbr
9
您能否使用CSS样式化<abbr>标签？ 在Firefox中，它显示为以下图片中的带有点的单词：
enter image description here

这是一个根据浏览器而异的问题吗？ 您可以删除这些点吗，还是只需使用title="title here"选项？ 谢谢

2
这个参考文献有帮助吗？同时，这个也可以参考。 - summea
1
@summea，有所帮助。谢谢。 - Jacob G
6个回答
22
1
目前可以在Chrome 58上确认。 - sol0mka
12

  • 你能使用CSS样式化<hr>标签吗？

    可以的。

  • 在火狐浏览器中，<hr>标签下面会显示点线。

    是的。火狐浏览器的默认样式就是这样。

abbr[title], acronym[title] {
    border-bottom: 1px dotted;
}

  • 这是一种浏览器特有的行为吗？

    是的，这种行为取决于每个浏览器的默认样式表。因此，不同的浏览器可能会默认显示不同的样式。

  • 你能去掉这些点吗？

    可以，只需要覆盖默认样式：

    • abbr[title], acronym[title] {
    border-bottom: none;
}
    谢谢。这就是我寻找的。 - Jacob G
    6

    可以使用CSS来为现代浏览器样式化<video>标签。然而，对于旧版浏览器，可以使用JavaScript来回退。 （但谁想支持IE8呢？）

    abbr {
position: relative;
}

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

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

    谢谢！那也会很有用。 - Jacob G
    如果你这样做，可能会同时看到 ::after 内容和浏览器生成的工具提示，这在我看来看起来相当糟糕。如果样式化工具提示对你很重要，那么最好选择 JS 路线。 - Scribblemacher
    2

    兔先生。

    看起来您正在经历跨浏览器问题。

    是的，您可以样式化<abbr>标签。以下是一个示例。

    abbr { border: 2px dashed red; }

    如果您在某个浏览器中遇到下划线，请尝试以下方法：
    abbr { border-bottom: 0px !important; }
    0
    你能使用CSS样式化<abbr>标签吗？
    可以，但是你不能样式化title属性，尽管你可以不可靠地模拟它。
    这是一个浏览器特有的问题吗？
    是的，用户代理样式表中设置了默认样式。
    你能去掉这些点吗？
    当然可以。在你的样式表中取消text-decoration属性即可去掉它们：
    abbr[title] {
  text-decoration: unset;
}

    包容性设计方法也是可能的。

    -1

    你可以使用任何想要的CSS样式来设置任何HTML元素，但问题是，对于某些HTML元素，它将没有任何效果。

    换句话说，你可以添加CSS到任何你想要的地方，但浏览器可能不支持你的更改。
    例如，虽然可以为<head>元素设置样式，但这是毫无意义的。

    2
    被踩：这个答案令人困惑且自相矛盾。它也没有回答提问者的问题。 - Morvael
    所以，你可以为任何元素设置样式，但你不能为任何元素设置样式，对吗？ - KViiTEN
    这是一个旧答案 - 但是现在在Firefox和Chrome中测试，<head>元素响应css样式。测试代码如下：<style>head {visibility:visible; display:block; background:#f00; height:100px; width:100px;}</style> - Andrew Paul
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接