Best Display Screen Size 1440x900px
如上图我们可以看出，在IE8和FF下，显示没什么问题，一切正常，如我们所想要的那样，文字左对齐，各个字段都有相对应的固定宽度，可在IE6下面却出了问题，每个li的下方多出了几个像素的高。当然这不是我们想要的，那到底是哪出了问题，产生了这几个像素呢？首先我们想到的肯定是li的下外边距，检查样式，我们没有给li设置下边距；再检查是不是IE中默认的li属性，自动产生的下边距，再检查样式，发现已经有*{margin:0;padding:0}，给所有元素清除外边距和内外距了。既然不是li导致的，那有没有可能是span呢？好，给span设置display:inline;不行，再换成display:block，依然不行，这里我们就想了，是不是span元素本身有什么问题，查一下span标签本身有没有问题。
baiduing。。。。。。
<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。
这时我们肯定能想起，有时候在html中让关键字变色的情形来。不错，那个时候就是用的span，我们肯定也会想起，用到span的地方也没有产生类似于今天这样，把文字下方撑大的情形啊。
静坐一小会，再来回想一下问题出在什么地方。。。
三个浏览器来回切换看，问题找到了。只有在IE6下，li下方才会多出几个像素来。截图，看看到底是几个像素。。。3个，我想起来了，我一个li里有3个span啊，是不是因为有3个span才产生的这3个像素啊（也许有人都笑了，可我当时就这么想的）。我给减一个span，问题依旧，然后加两个试试，看变不变，加两个，也不变。我把span的float:left给删了看看，不定宽了，高度也不对了，float:left不能删。
没事在PS里用选区工具看着两个li之间的白条，3个像素，3个，3个（若有所悟？）是不是IE6著名的bug，3像素。。。
baiduing。有了：
当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，它会偏移3像素。
只要触发IE的hasLayout，非浮动元素就会拥有布局。所以，利用IE6特有的hack规则，为它单独写样式就可修复此问题：
_zoom:1;
margin-left: value;
_margin-left: value-3px;
zoom 是IE触发Layout条件之一，因为它是IE特有的CSS规则，所以采用zoom。
margin-left: value-3px 是修复IE6 中3px 的bug。
此前采用非浮动元素也浮动的方法修复bug，现在我们可以试试这个新的方法了！
注：前面的下划线是专门写给IE7以下版本的hack
看完这个，别急着去把人家现成的代码粘贴过来，仔细看一下具体怎么回事。仔细看上面加粗的部分。当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，它会偏移3像素，也就是说，跟我们li中的span相邻的元素没有浮动（我们这里的span已经给它float:left了）。那我们span的相邻元素是什么？不就是li吗？好，给li加上float:left。。。刷新页面。问题解决。
所以“别人的解决方法”我们这里不用也把问题解决了。我为什么没有采用“别人的解决方法”呢？
PS: 这里需要注意的可能就是ul，li，还有三个span里的字段加起来的总的width的问题。还有就是在ul结束以后，得在外面加一个层，给这个层设置样式，清除浮动。
我为什么没有采用“别人的解决方法”呢？
通常地，我们需要让li上下之间留出一到两个像素的间隔，现在我们用“别人的解决方法”来给我们的li上下之间加两个像素的高，先给margin-top:1px;，然后“别人”所说的，把margin-left: value;_margin-left: value-3px;换成margin-bottom: 1px;_margin-bottom:-2px;-2=1-3，代码：
baiduing。。。。。。
<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。
这时我们肯定能想起，有时候在html中让关键字变色的情形来。不错，那个时候就是用的span，我们肯定也会想起，用到span的地方也没有产生类似于今天这样，把文字下方撑大的情形啊。
静坐一小会，再来回想一下问题出在什么地方。。。
三个浏览器来回切换看，问题找到了。只有在IE6下，li下方才会多出几个像素来。截图，看看到底是几个像素。。。3个，我想起来了，我一个li里有3个span啊，是不是因为有3个span才产生的这3个像素啊（也许有人都笑了，可我当时就这么想的）。我给减一个span，问题依旧，然后加两个试试，看变不变，加两个，也不变。我把span的float:left给删了看看，不定宽了，高度也不对了，float:left不能删。
没事在PS里用选区工具看着两个li之间的白条，3个像素，3个，3个（若有所悟？）是不是IE6著名的bug，3像素。。。
baiduing。有了：
当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，它会偏移3像素。
只要触发IE的hasLayout，非浮动元素就会拥有布局。所以，利用IE6特有的hack规则，为它单独写样式就可修复此问题：
_zoom:1;
margin-left: value;
_margin-left: value-3px;
zoom 是IE触发Layout条件之一，因为它是IE特有的CSS规则，所以采用zoom。
margin-left: value-3px 是修复IE6 中3px 的bug。
此前采用非浮动元素也浮动的方法修复bug，现在我们可以试试这个新的方法了！
注：前面的下划线是专门写给IE7以下版本的hack
看完这个，别急着去把人家现成的代码粘贴过来，仔细看一下具体怎么回事。仔细看上面加粗的部分。当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，它会偏移3像素，也就是说，跟我们li中的span相邻的元素没有浮动（我们这里的span已经给它float:left了）。那我们span的相邻元素是什么？不就是li吗？好，给li加上float:left。。。刷新页面。问题解决。
所以“别人的解决方法”我们这里不用也把问题解决了。我为什么没有采用“别人的解决方法”呢？
PS: 这里需要注意的可能就是ul，li，还有三个span里的字段加起来的总的width的问题。还有就是在ul结束以后，得在外面加一个层，给这个层设置样式，清除浮动。
我为什么没有采用“别人的解决方法”呢？
通常地，我们需要让li上下之间留出一到两个像素的间隔，现在我们用“别人的解决方法”来给我们的li上下之间加两个像素的高，先给margin-top:1px;，然后“别人”所说的，把margin-left: value;_margin-left: value-3px;换成margin-bottom: 1px;_margin-bottom:-2px;-2=1-3，代码：