首页 > 代码库 > IE6/7中li浮动外边距无法撑开ul的解决方法
IE6/7中li浮动外边距无法撑开ul的解决方法
昨天群里有人提出了这样的问题:
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 | < html xmlns = "http://www.w3.org/1999/xhtml" > < 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{ width:960px;margin:0 auto;} .wrap ul{overflow:hidden;} .wrap li{ width: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
:
0
10px
20px
0
;
border
:
1px
solid
#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
:
0
10px
20px
0
;
border
:
1px
solid
#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