IE6/7中li浮动外边距无法撑开ul的解决方法
2012-11-14 15:34
459 查看
昨天群里有人提出了这样的问题:
为什么在现代浏览器(谷歌、火狐、IE8/9)中显示是这样的:
而在IE6/7中却是这样:
遇上这种盒装模型撑不开的情况,我第一时间想到的是给父容器加overflow:hidden。但是,他上面已经加了。那是什么原因呢?原因可能出在浮动上面,因为IE6/7对浮动的解析不同导致无法将容器撑开。于是我的建议是去掉li的浮动,用display:inline-block;来实现并排排列。CSS部分代码如下:
嗯,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;来解决。代码如下:
给改用display:inline-block的li里再加上浮动。代码如下:
不理解display:inline-block;*display:inline;zoom:1;的意思的,可以看下这篇文章:IE6/7下不同的inline-block
Demo下载:http://pan.baidu.com/share/link?shareid=120078&uk=3221702211
<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{background-color:#9C9; 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部分代码如下:
*{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;来解决。代码如下:
*{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里再加上浮动。代码如下:
*{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
相关文章推荐
- IE6/7中li浮动外边距无法撑开ul的解决方法
- 解决li设置浮动ul高度无法被撑开问题
- li浮动时ul高度为0,解决ul自适应高度的几种方法
- li浮动引起ul高度坍陷的解决方法
- div里ul li浮动之后父容器高度不能自动增加的解决方法
- li浮动时ul高度为0,解决ul自适应高度的几种方法
- li浮动引起ul高度坍陷的解决方法
- li浮动时ul高度为0,解决ul自适应高度的几种方法
- (转)E6/IE7下ul左浮动后li的左边距增大的解决方法
- 浮动元素无法撑开父元素--解决方法
- li浮动引起ul高度坍陷的解决方法
- 浮动元素无法撑开父元素的解决方法
- li浮动时ul高度为0,解决ul自适应高度的几种方法
- li浮动时ul高度为0,解决ul自适应高度的几种方法
- Ul中li如果有浮动会使ul高度塌陷,清楚li浮动的几种解决方法
- li浮动时ul高度为0,解决ul自适应高度的几种方法
- Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决
- css中子元素浮动,无法自动撑开父元素的解决办法
- 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法
- li浮动时ul自适应高度方法