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

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

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

请参阅: 文本装饰与边框底部

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
--------------------

抱歉使用代码格式而不是正确地渲染这些示例,但是你可以看到我想要的重点.