主站经典论坛作品集 Think.Pages 博客维基桌面聚合

经典论坛 « WEB标准化专栏 « 为什么在ie6下li float后会增加间距呢？

打印

[求助] 为什么在ie6下li float后会增加间距呢？

zyq199 [楼主]

初级会员

帖子: 32
体力: 79
威望: 0
离线: 42 天

发短消息

1^# 大中小发表于 2008-5-18 13:55

在ff下正常，在ie6下li好象都增加了高度~~恳求高手们帮助看看。。。

提示：您可以先修改部分代码再运行

[ 本帖最后由 zyq199 于 2008-5-18 15:15 编辑 ]

TOP

zyq199 [楼主]

初级会员

帖子: 32
体力: 79
威望: 0
离线: 42 天

发短消息

2^# 大中小发表于 2008-5-18 14:50

顶上去~~~

TOP

ivanling

初级会员

帖子: 86
体力: 170
威望: 1
当前: 广东深圳
离线: 2 天

专长 前端制作,ASP,策划

3^# 大中小发表于 2008-5-18 15:00

你的高度有没有把padding加上去,盒模型是包括间距的

TOP

zyq199 [楼主]

初级会员

帖子: 32
体力: 79
威望: 0
离线: 42 天

发短消息

4^# 大中小发表于 2008-5-18 15:08

麻烦楼上的能不能给讲偶的细一点，我有点不明白。

最好能在偶的代码里修改一下发上来。

TOP

zidanezhicong

我爱阿仙奴
高级会员

帖子: 441
体力: 883
威望: 0
当前: 广东深圳

专长 前端制作

5^# 大中小发表于 2008-5-18 17:00

兼容ie6，ie7，FF。不要问我问什么，这都是ie独有的hasLayout问题惹得祸。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>无标题文档</title>
<style>
* {margin:0px; padding:0px; list-style:none; font-size:12px}
#photo { width:298px; border:1px solid #0066FF;}
#photo ul { padding:10px; text-align:center;zoom:1; overflow:hidden;}
#photo ul li { width:69px; float:left}
#photo ul li img { width:50px; height:50px; border:1px #00CCFF solid; padding:2px; display:block; margin:0 auto;}
#photo ul li p { line-height:20px;}
</style>
</head>
<body>
<div id="photo">
	<h4>图片</h4>
    <ul>
    	<li><img src="http://img5.cn.msn.com/5/2008/5/18/20501.gif" /><p>小迷</p></li>
        <li><img src="http://img5.cn.msn.com/5/2008/5/18/20501.gif" /><p>小迷</p></li>
        <li><img src="http://img5.cn.msn.com/5/2008/5/18/20501.gif" /><p>小迷</p></li>
        <li><img src="http://img5.cn.msn.com/5/2008/5/18/20501.gif" /><p>小迷</p></li>
        <li><img src="http://img5.cn.msn.com/5/2008/5/18/20501.gif" /><p>小迷</p></li>
        <li><img src="http://img5.cn.msn.com/5/2008/5/18/20501.gif" /><p>小迷</p></li>
        <li><img src="http://img5.cn.msn.com/5/2008/5/18/20501.gif" /><p>小迷</p></li>
        <li><img src="http://img5.cn.msn.com/5/2008/5/18/20501.gif" /><p>小迷</p></li>
    </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

我爱阿仙奴！

TOP

zyq199 [楼主]

初级会员

帖子: 32
体力: 79
威望: 0
离线: 42 天

发短消息

6^# 大中小发表于 2008-5-18 19:25

谢谢楼上的回复，偶又学好一点了。。

TOP

‹‹ 上一主题 | 下一主题 ››