昨天群里有人提出了这样的问题:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>测试</title><style type="text/css">*{padding:0; margin:0; list-style:none;}.wrap{ 960px;margin:0 auto;}.wrap ul{overflow:hidden;}.wrap li{50px;height:50px;float:left;margin:0 10px 20px 0;border:1px solid #c00;}</style></head><body> <div class="wrap"> <ul class="q"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div></body></html> |
为什么在现代浏览器（谷歌、火狐、IE8/9）中显示是这样的：
而在IE6/7中却是这样：
遇上这种盒装模型撑不开的情况，我第一时间想到的是给父容器加overflow:hidden。但是，他上面已经加了。那是什么原因呢？原因可能出在浮动上面，因为IE6/7对浮动的解析不同导致无法将容器撑开。于是我的建议是去掉li的浮动，用display:inline-block;来实现并排排列。CSS部分代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
*{padding:0; margin:0; list-style:none;}.wrap{background-color:#9C9; width:960px}.wrap ul{overflow:hidden;}.wrap li{width:50px;height:50px;margin:0 10px 20px 0;border:1px solid #c00;display:inline-block;*display:inline;zoom:1;} |
嗯，IE6/7问题解决了，
可是新的问题又出现了！这是谷歌、火狐、IE8/9中的表现：
li之间竟然出现了多余的边距。这不是双边距，是由于浏览器对li的解析不同，谷歌、火狐、IE8/9的li之间是有默认间距的，且无法通过padding:0; margin:0解决（这个间距其实是代码中的换行符的字符间距）。
去掉li中的margin:0 10px 20px 0可以看出来。
谷歌、火狐、IE8/9中的效果:
IE6/7中的效果：
那怎么办？用浮动IE6/7出问题，用display:inline-block谷歌、火狐、IE8/9又不行！
我想出了两种解决方式：
-
在原先代码的基础上，给父元素加*padding-bottom:20px;来解决。代码如下：
12345678910*{padding:0;margin:0;list-style:none;}.wrap{background-color:#9C9;width:960px;}.wrap ul{overflow:hidden;*margin-bottom:20px;}.wrap li{width:50px;height:50px;float:left;margin:010px20px0;border:1pxsolid#c00;} -
给改用display:inline-block的li里再加上浮动。代码如下：
1234567891011121314*{padding:0;margin:0;list-style:none;}.wrap{background-color:#9C9;width:960px;}.wrap ul{overflow:hidden;}.wrap li{width:50px;height:50px;float:left;*float:none;margin:010px20px0;border:1pxsolid#c00;display:inline-block;*display:inline;zoom:1;}
不理解display:inline-block;*display:inline;zoom:1;的意思的，可以看下这篇文章：IE6/7下不同的inline-block
Demo下载：http://pan.baidu.com/share/link?shareid=120078&uk=3221702211