IE6/7中li浮动外边距无法撑开ul的解决方法

昨天群里有人提出了这样的问题:

<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又不行!
我想出了两种解决方式:

  1. 在原先代码的基础上,给父元素加*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;
    }
  2. 给改用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

转载于:https://www.cnblogs.com/xjchenhao/archive/2012/11/14/4014159.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值