Posts Tagged ‘CSS’

IE bug:使用letter-spacing导致br失效
01
08 Jan

前几天遇到一个状况,明明打了两个<br />的换行符,上下两行字还是挨在一起,少了一个空行。

<p>
第一行
<br /><br />
第二行
<br /><br /><br />
第三行
</p>

不管是IE6还是IE7,状况都是一样,而Firefox里显示很正常。检查了一遍CSS,没发现有什么错误,也没有对br有特殊定义,只好视为IE的bug,只好一条一条CSS来排查。其中有这么一段定义:

p {
    
font-size: 75%;
    
text-align: left;
    
line-height: 165%;
    
letter-spacing: 0.05em;
}

当把“letter-spacing: 0.05em;”这一句删除时,状况消失。看来,正是这个letter-spacing属性,导致两个br出了问题。将letter-spacing的值放大到10px,再选取p标签中的文字,可以看到,在IE中,第一个br也被加上了letter-spacing值,而且成为了第一行的最后一个字符,换行的功能丧失。只有第二个br,才真正起到了换行的作用。而Firefox中,没有发现br被加上了letter-spacing值的现象,两个br的功能保持正常。

letter-spacing 这个CSS属性,主要是用于微调字符之间的间距,平时并不常用。查了一下官方资料,并未见其有bug的描述。但是这个状况的确在IE系列浏览器中产生了。如果单纯地删掉letter-spacing的定义,固然能解决这个bug,但是对于版面的细微控制又丧失了。于是尝试对br的letter-spacing进行清除:

p br{
    
letter-spacing:normal;
}

可以看到,在IE中的这个bug解决了。虽然只是一个很不常见的小小的bug,却常常让人半天摸不着头脑,IE系列的浏览器还真是烦人啊。