本文详细分析了在IE6和IE7浏览器中使用浮动元素时出现的间距问题，并提供了有效的解决策略。通过案例研究，揭示了`list-style-position:outside`样式属性对浮动元素间距的影响，最终找到了问题所在并给出了解决方案。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>bug</title>
<style>
ul,li{margin:0;padding:0;list-style:none;}
.fl{float:left;display:inline;}
.imgList{width:200px;background:red;}
.imgList li{height:20px;border:1px solid green;}
</style>
</head>
<body>
<ul class="imgList fl">
<li>IE6 IE7与UL产生的间距</li>
</ul>
</body>
</html>
注意IE6 IE7下的效果与其它浏览器效果不一致。
由于项目需求，必须用到float:left;display:inline;问题来了，如果把这个class给如上代码UL，IE6 IE7 LI前就出现莫名间距。换成其它标签不会出现此现象。
比如换成：dl dd
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>bug</title>
<style>
dl,dd{margin:0;padding:0;list-style:none;}
.fl{float:left;display:inline;}
.imgList{width:200px;background:red;}
.imgList dd{height:20px;border:1px solid green;}
</style>
</head>
<body>
<dl class="imgList fl">
<dd>换标签了一切正常了</dd>
</dl>
</body>
</html>
针对代码ul li现象尝试了如下解决办法:
1、给li也float:left;
2、去掉UL的display:inline;
由于IE6有符动间距BUG所以.fl{float:left;display:inline;}习惯性的写在一起。让我等不得其解的是为何只跟UL LI有关呢？这算是一个BUG么？求点解！所以然！！
原来是它在捣鬼：list-style-position:outside；呵呵！完必！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
