§ ITPOW >> 文档 >> CSS

指定行高(line-height),避免 a 边框被覆盖

作者: 来源: 日期:2008-6-20

(其实本文用法有误:a 的 display 默认为 inline,不应该指定 border;若要指定 border,则为 a 指定 display:block;,此时不用指定行高(line-height) a 边框也不会覆盖了。ITPOW编辑注)

行高太小,文字太大,会出现文字重叠的情况,这个大家可能都遇到过。

行高太小,超链接的边框被覆盖的情况,可能不常见,原因是很少为超链接作边框。

<div style="background-color:#FFCC00;">a</div>
<a style="border:1px solid green;text-decoration:none;" href="http://www.itpow.com/">ITPOW</a>
<div style="background-color:#FFCC00;">b</div>

考察以上代码,我们可以发现在 IE 中,超链接没有下边框,原因是默认的 line-height 太小(默认的 line-height 大概是 120%),我们将代码改为如下:

<div style="background-color:#FFCC00;">a</div>
<a style="border:1px solid green;line-height:150%;text-decoration:none;" href="http://www.itpow.com/">ITPOW</a>
<div style="background-color:#FFCC00;">b</div>

可以发现边框出来了。

相关文章