用border-bottom代替text-decoration实现超链接下划线

记得我有一次看到某网站上的超链接下划线颜色居然和文字颜色不一样,更有甚者,下划线居然是虚线,当时我觉得好神奇。一看源码才发觉其实很简单,只是用border-bottom代替text-decoration而已。说到这里,相信不用我说大家也知道怎么实现的了。

有的人不太明白为什么要用border-bottom代替text-decoration,或者说是不明白这样的好处,我就以我的经验来讲讲吧。关于text-decoration的一些注意事项,可以点这里。

border-bottom的好处在于,它可以设置线与文字不一样的颜色,可以自由设置划线的粗细,还可以自由设置下划线与文字间的距离,甚至变实线为虚线或点线形态。而这些,text-decoration都做不到。border-bottom比text-decoration强大灵活得多。

但使用它时,也要注意到几点,不然你会后悔的:

1,border-bottom会额外增加行高

为元素加上border-bottom后,会在元素的line-height基础上再增加一段高度,就是你border的宽度(浏览器间有差异)。解决办法就是定死元素的height。

2,border-bottom可以与text-decoration:underline并存

所以你有时候你会发现某元素居然有两根下划线!

3,border-bottom可以加在所有元素上

我说这句话的意思是,它可能会出现在你并不想它出现的地方。比如说你设置了某块内的A标签a:hover{border-bottom:2px solid #f00;},你会突然发觉居然链接中的图片也会在hover的时候出现下划线(这种效果最难看了)。而text-decoration则不会有这种担心,它只对文字元素有效

这也是border-bottom最恼火的一点,通常不得不单独对某元素修改设置

3,IE8以下版本无法为非块级元素加上border-bottom(所以刚才有个理论上)

比如span,label,但IE8及其他浏览器可以

(以上为错误知识!不知为什么当时居然会出现这种情况,当时我还以为我对CSS的了解居然如此匮乏呢。。。)

4,两者对块级元素的显示方式不一样

比如你设置某A标签为display:block;那它默认宽度就会变成它父元素一样的宽度(即100%),此时你分别为它加上text-decoration:underline;和border-bottom,你会发现无论文字多少,border都会延伸到一整行,而text-decoration只会出现在有文字的一段。

好像也就有这几点。大家如有疑问或不同意见,欢迎回复探讨。

17 评论

发表评论

电子邮件地址不会被公开。