IE6下html标签"LI"回车后间距过宽的bug修复

今天UI给我的界面里面出现了一个奇怪的问题，就是在IE6下面：

 

<ul><li>aaa</li><li>bbb</li><li>ccc</li></ul>

 和

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>

 

的表现不一样，前者显示的结果是这样的：

aaa

bbb

ccc

而后面一种显示的结果是：

aaa

 

bbb

 

ccc

间距变大了，让人很头疼，ul和li的margin, padding， border都设成'0'了可是一点效果也没有。

最后发现是ul的“line-height” 属性在做怪，在IE6里面</li>和<li>之间的回车被当作了一个字符，并且给这个字符设置了高度，就是“line-height”的值，而在FF和IE7则没有这个bug，所以只要在IE6下面的css里面把"ul"的 “line-height”直射小一点就可以了，你可以这么写:

 

/*for FF,IE7 etc，advance browser*/
html>body ul{line-height:22px;}

/*for IE6*/
ul{line-height:12px;}

 

这样就可以修复IE6下面的这个BUG了。