IE bug:使用letter-spacing导致br失效01
08 Jan
08 Jan
前几天遇到一个状况,明明打了两个<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系列的浏览器还真是烦人啊。
小贺 Says:03
08 Jan
你又开张了耶。
城里的乡下鱼 Says:04
08 Jan
恭喜重新开张!
怎么转型做技术博了?
LAZY Says:04
08 Jan
我他×的。我是傻×一个!
小贺 Says:06
08 Jan
梦游的主机怎样啊?有没有好些的空间提供商推荐一下啊。
城里的乡下鱼 Says:06
08 Jan
小贺,我用的是世纪东方的主机,感觉一般呢!正在申请加速器!
小羊,我的博换了模样,恢复了留言功能,去踩踩吧!
小羊 Says:09
08 Jan
[quote comment=”7″]梦游的主机怎样啊?有没有好些的空间提供商推荐一下啊。[/quote]
梦游不错的。
小贺 Says:12
08 Jan
已经买了梦游的空间 确实不错。不过一个严重的问题是,盛天的ftp连不上,用代理、让朋友帮忙备份东西都没成功。郁闷至极。
Zach Says:05
08 Feb
經過測試發現使用 br { letter-spacing:normal; } 有時會無法解決,建議大家使用 br { letter-spacing:0; } 。