IE6/IE7中li底部4px空隙的Bug

IE6和IE7浏览器中，当列表项<li>的子元素使用了浮动属性(float)时，会出现一个底部空隙的bug，具体表现为底部出现4px的空间。这个bug的原因在于IE6/IE7处理浮动元素的方式与众不同，导致了这种不期望的空隙。针对此问题，已经摸索出几种有效的解决方法，这些方法在一些情况下可能需要根据实际页面结构进行调整。 需要理解这个bug产生的条件：当列表项<li>的子元素存在浮动，并且<li>元素设置了特定的CSS属性（如宽度(width)、高度(height)、缩放(zoom)、上内边距(padding-top)、下内边距(padding-bottom)、上外边距(margin-top)、下外边距(margin-bottom)）时，4px的底部空隙就会出现。 针对这个bug的解决方法包括： 方法1：对于#list元素中的<div>设置clear属性为left或both。这个方法简单易行，但存在局限性，比如在#listli元素上不能设置width、height、zoom属性。因此，此方法适用于不需要控制这些属性值的情况。 方法2：在#listli元素上设置float属性为left。这种方法允许#listli设置width、height、zoom属性，因为设置了浮动可以消除前面提到的bug条件。然而，需要注意的是，给元素设置浮动后，其后的元素可能会受到影响，需要额外的清除浮动操作。 方法3：通过在li中的<div>设置vertical-align属性为top、middle或bottom之一来解决。这种方法对代码几乎没有影响，因为它不需要改变HTML结构或大幅度修改CSS。只需添加或修改vertical-align属性值即可。 在提供的示例代码中，作者使用了XHTML和内联CSS样式进行演示。通过设置不同的类（如.list、.listv-top、.listv-middle、.listv-bottom）来应用不同的CSS样式，从而展示三种解决方案在实践中的应用。这些示例的HTML结构简单，主要包含无序列表<ul>和列表项<li>，每个<li>内嵌一个<div>。 CSS样式部分，作者定义了ul的基本样式，移除了默认的margin和padding，并且设置列表样式为none。同时，设置了清除浮动的hr元素的样式。对于.list类的li元素，设置了一个固定的宽度，并且对<div>设置了浮动和背景颜色。 此外，作者通过创建.listv-top、.listv-middle、.listv-bottom类，并分别赋予不同的vertical-align值来展示第三种方法的具体应用。这样一来，可以清楚地看到在不同vertical-align值设置下，列表项底部空隙的变化情况。 在实际应用这些方法的时候，需要注意页面上其他元素的表现，因为有时候调整一个地方的样式可能会影响到其他地方。尤其是在处理布局问题时，需要确保整个页面的布局一致性。 总结来说，IE6/IE7中的这个bug是由于浮动和特定CSS属性的组合造成的，解决此问题可以通过调整CSS属性来实现，比如设置清除浮动、改变元素的浮动属性或者使用vertical-align属性。在实施具体方案时，应该根据页面的具体布局情况和需求来选择合适的方法。