解决浮动列表双倍边距bug

更新时间：2008-07-18参与评论

对于一个有代码洁癖的人，所以对于列表，我通常能够不用在外面嵌套DIV来实现效果的话我一般不选择嵌套DIV，但是当把一个列表浮动的时候，就出现了一个怪异的新问题。在IE6跟IE7里面都产生了双倍边距。

通常我们知道在IE6里面，当处于浮动边缘的元素拥有一个跟浮动方向相同的边距值时，在IE6里面会产生双倍的边距，这种BUG的解决，通常是加一句display:inline;但是列表这里产生的BUG使用display:inline却不会有任何效果，并没有产生我们所期望的效果。以下是截图：

我们可以看到这个BUG只会对UL,OL等列表元素生效。其他元素不会受其影响。最终经过测试得知：这个BUG的产生跟list-style-position有关。默认的list-style-position是inside,这样当列表浮动的时候它的margin值会导致list-style-position对li产生相同的边距影响，所以最终的解决办法是把列表元素的list-style-position设置为outside,希望能给以后碰到同样问题的同仁一点收获！