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

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

bottom-border让你控制文本和下划线之间的距离，所以它更通用。并且（如上所述），它允许下划线使用不同的颜色（尽管我没有看到你想要这样做的原因）。

text-decoration更“正确”，因为它是用于加下划线的文本的'真正'CSS属性。

如果您为所有链接设置了text-decoration: underline，那么您将不得不为text-decoration: none设置不需要下划线的特殊链接。但是如果你使用border-bottom代替，你将会保存一行CSS代码（假设你在你的reset CSS中设置了text-decoration: none）

所以总而言之，如果你有一个复杂的布局，我会投票给border-bottom不同风格的每个环节，但text-decoration一个简单的网站“经书”编码。

Answer 3

正如伊格纳西奥说，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

对不起，这里有一些答案是误导性的。由于内嵌块的性质，分割一行文本并不会将边框放置在整个块的底部。链接下的边框在浏览器中实际上比文本修饰更加一致：下划线。

参见：Text-Decoration vs. Border-Bottom

Answer 5

设置你的文字显示嵌入式（实际上，它应该是在默认情况下），将导致下边框呈现多文本装饰规则。

不过，我认为您要使用这种技术的链接通过执行以下操作：

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

这是一个好主意，但是你会发现，只要你有一个内部的img标签链接，图像下方会有一个红色边框。

如果你可以找到一种方法来使用现有的选择器和没有JavaScript的目标页面元素（图像）的父母，我会给你买一瓶啤酒，但我不认为你会有很多运气。

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

如果你完全控制了你的标记，我想你可以通过向每个链接添加类来弄明白你的方式，但是如果你正在使用任何流行的CMS系统，你会为这个想法而努力。

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不能：

1. 文字之间的间距“下划线”
2. “下划线”样式（点线，虚线，固体，渐变，图像）
3. 厚度
4. CSS过渡/动画
5. 分离文本和颜色之间的 “下划线”

在很多情况下，这些功能大部分都不需要 - 但最好让它们可用！我已经开始使用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); 
} 

这样，链接将显示一个“默认”的基础上，符合市场预期，但仍然允许根据需要进行定制。