再谈text-decoration与border-bottom

在上一篇文章中,我写了一些用border-bottom代替text-decoration实现下划线的几点值得注意的地方,这篇文章算是补充和纠错。但有的朋友留言表示连怎么加上text-decoration或border都不懂,也许这就是隔行如隔山吧,术业有专攻,不能强求。其实非常简单,所以我顺带在这里提一下如何加上text-decoration或border,高手就跳过这段吧。

.bb{border-bottom:1px solid #f00;}/*加上1px颜色为红色(#f00)的下边框*/
.td{text-decoration:underline;}/*直接加上下划线*/

当然,这段代码必须写入中<style type=”text/css”></style>,然后在你需要的地方引用相应的CSS样式就可以了。

在上一篇文章的留言中,疾风提到如果容器中的文字太多换了行,会不会出问题,这的确会出问题,感谢疾风的提醒。下面是一些不同情况下的示例代码。

先是文字不换行时的border-bottom:

这是一个加上border-bottom的DIV

这是一个加上border-bottom的h3

这是一个加上border-bottom的A
这是一个加上border-bottom的span

从上面可以看出来,即使是文字并没有满行,块级元素诸如div,p,h3之类的也是满宽度的,所以背景及border-bottom也是满宽度;但a,span之类的行内元素则相反(为了让读者清楚元素的实际区域,我为它们都加上了背景色)

PS:WP会为文章分段默认加上P标签,让我的代码示例变形了,不知道怎么取消这个功能,真他妈恼火

再是文字换行时的border-bottom:

这是一个加上border-bottom的DIV这是这是这是一个加上border-bottom的DIV

这是一个加上border-bottom的h3这是一个加上border-bottom的h3

这是一个加上border-bottom的A这是一个加上border-bottom的A
这是一个加上border-bottom的span这是一个加上border-bottom的span

换行之后,明显地不同了。div,h3由于是块级元素,所以border出现在整块的下面;而a,span是行内元素,所以每一行都有边。

下面测试text-decoration

为了方便,我把换行与不换行的情况都写在这里了。

这是一个加上text-decoration的DIV

这是一个加上text-decoration的h3这是一个加上text-decoration的h3

这是一个加上text-decoration的A这是一个加上text-decoration的A标签

这是一个加上text-decoration的span

如上,以上的DIV与h3都是块级元素,所以就让它们一个不换行一个换行,这样就可同时查看两种情况了。如我前几篇文章说的一样,text-decoration只会出现在文字下方,没有文字就没有它,但从上面示例的各元素背景色可以看出,实际上DIV与h3的区域还是跟前面两个示例中是一样的,依然是100%,只下“下划线”变了。

至于a与span的text-decoration,就不用说了。

以上所有代码,在IE系列及firefox中几无差别(最基本的都有差别那真是天理不容了)

上一篇文章里的观点,刚才测试的时候居然发现错了,赶紧更正,不然真是毁人不倦了。也许是标签太多把我自己都搞混了。。。原谅我这个理由吧

8 评论

发表评论

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