2Lazy.org It’s time 2 kill lazy ones …

IE bug：使用letter-spacing导致br失效

Published on 01/01/08
by 小羊

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

第一行

第二行

第三行

不管是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系列的浏览器还真是烦人啊。

That's it. What Next?

Please leave your comment so we know what you think about this article. Trackback URL: IE bug：使用letter-spacing导致br失效.