Question

使用{text-decoration: underline}和{border-bottom: ...}有什么区别？

哪个很容易风格和跨浏览器兼容？

我们应该border-bottom使用text-decoration: underline吗？

使用border-bottom始终代替text-decoration: underline？

是否合适？

Answer 1

border-bottom在元素框的底部添加一行。 text-decoration:underline呈现带下划线的文字。确切的区别取决于所使用的HTML和文本布局引擎，但一般情况下，如果您希望文本带下划线，则加下划线。

Answer 2

很抱歉这样说，但这里的一些答案具有误导性。由于内联块的性质，拆分一行文本不会将边框放在整个块的底部。链接下的边框实际上在浏览器中比文本修饰更加一致：下划线。

请参阅：Text-Decoration vs. Border-Bottom

Answer 3

正如Ignacio所说，border-bottom会将该行放在包含框的底部，而text-decoration:underline实际上会为文本加下划线。这成为多行字符串的重要区别。

I am a single line and will look similar for both methods
---------------------------------------------------------

对于这两种样式，

可能会呈现相同的效果，但对于多行字符串，您将获得以下内容。

I am a string that has been
split and added a border-bottom
-------------------------------

I am a string that has been
---------------------------
split and underlined
--------------------

使用代码格式而不是正确地渲染这些示例的道歉，但你可以看到我想要的观点。

Answer 4

bottom-border可让您控制文本与下划线之间的距离，因此它更加通用。并且（如上所述）它允许下划线的不同颜色（虽然我没有看到你为什么要这样做的原因）。

text-decoration更“正确”，因为它是用于标记文字的“真正的”CSS属性。

如果您为所有链接设置text-decoration: underline，则必须为text-decoration: none设置不需要下划线的特殊链接。但是如果你使用border-bottom，你将保存一行CSS代码（假设你在重置CSS中设置text-decoration: none。

总而言之，如果你的每个链接都有不同风格的复杂布局，我会投票给border-bottom，但text-decoration代表一个由“书籍”编码的简单网站。

Answer 5

将文本设置为内联显示（实际上，默认情况下应该是这样）将导致border-bottom呈现为文本修饰规则。

但是，我假设您希望通过执行以下操作在链接上使用此技术：

/* my super eye catching dual colour link */
a {
  color:black;
  border-bottom:1px solid red;
}

这一切都很好，但你会发现无论你在链接里面有一个img标签，图像下面都会有一个红色边框。

如果你能找到一种方法来定位使用现有选择器而没有javascript的页面元素（图像）的父级，我会给你买啤酒，但我不认为你会有太多运气。< / p>

使用“text-decoration”完全避免了这个问题，因为图像显然不是文本，在链接内部时不会呈现下划线。

如果您完全控制了您的标记，我想您可以通过在每个链接中添加类来笨拙地完成任务，但如果您正在使用任何流行的CMS系统，那么您将会遇到这个想法。 / p>

Answer 6

尝试使用1px图像的边框

a:hover {
    background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
    background-color: transparent;
    background-image: url("img/bg-link-hover.png");
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0px 92%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}

Answer 7

虽然总会出现一个比另一个更合适的情况，但border-bottom提供了对text-decoration的更精确控制，因此可能是首选方法。以下是border-bottom可以控制/启用的text-decoration无法快速（可能不详尽）的属性列表：

文字与“下划线”之间的间距
“下划线”样式（点线，虚线，实线，渐变，图像）
厚度
CSS过渡/动画
文本与“下划线”之间的颜色分离

在许多情况下，大多数这些技能都不需要 - 但最好让它们可用！我已经切换到使用border-bottom主要是为了能够在文本和下划线之间放置几个像素的填充;我发现的下一个最常见的用途是将下划线颜色与文本颜色分开。

现在，每个主要浏览器都会出现CSS变量，“重置”样式表可能如下所示：

:root {
    --link-color: blue;
    --hover-color: purple;
    --underline-color: var(--link-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: 1px solid var(--underline-color);
}

a:hover {
    color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}

这样，链接将在“默认”基础上按预期显示，但仍允许根据需要进行自定义。

文本修饰：下划线与边框底部

7 个答案: