春节过后，每年的河北省春季招聘会又要开始了。河北搜才网推出了一个关于本次招聘会的专题页面http://www.hbsc.cn/content/topics/2011chunzhao/，在本页面的列表内容相关版块，均为资讯标题和发布时间的列表形式。
在页面制作过程中，理所当然的使用了<ul>，资讯标题和发布时间位于一个<li>，然后将其分别用<span>标签命名相应的class，并设置为fllat:left。从理论上来说，这是没有任何问题的。
OK，使用firefox、google chrome、oprea、IE6-8查看了其界面兼容性，然后就被华丽丽的IE6雷到了。
IE6真是太不给力了，每个列表的高度，均将其撑大了4像素，如下图所示（说明：图中的上下黑色边框是增加的参考线，为了查找原因）。
左侧是IE6的效果，右侧是google chrome的效果。
我较少使用CSS hack，重点是不想在CSS中增加太多的代码。
那么应该如何解决这个问题呢？ 请出google大神，找到了一个解决方法：”将<ul>和<li>均设置float:left，即可“。试验了一下，神奇的事情发生了，果真如此。
这是为什么呢？网上都说是IE6的bug，姑且这么认为。
又一次google，发现了另一个解决方案，将<li>设计为vertical-align:middle，也能解决这个问题。
由此，个人推测IE6的这个bug，是因为垂直方向的默认对齐方式是基线对齐而增加了相应的几像素的值。
对vertical-align的具体说明，请参阅这篇文章：破解缝隙之谜
