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

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

  1. 在原先代码的基础上，给父元素加*padding-bottom:20px;来解决。代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    *{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里再加上浮动。代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    *{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的解决方法的更多相关文章

  1. IE6/IE7中li底部4px空隙的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...

  2. IE6/IE7中li底部4px的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...

  3. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  4. 关于真机调试DDMS中的data文件夹打不开的解决方法

    关于真机调试DDMS中的data文件夹打不开的解决方法 今天在开发的时候需要导出程序中的数据库文件查看数据,数据库文件默认就在/data/data/应用包名/databases/数据库名 这个路径下, ...

  5. Node.js中针对中文的查找和替换无效的解决方法

    Node.js中针对中文的查找和替换无效的解决方法.   //tags的值: tag,测试,帖子 var pos1 = tags.indexOf("测"); //这里返回-1 ta ...

  6. SecureCRT中某些命令提示符下按Backspace显示^H的解决方法

    SecureCRT中某些命令提示符下按Backspace显示^H的解决方法 安装了Apache Derby数据库服务器之后,使用ij客户端去连接derby服务端,可是在ij中输入命令的时候,每当输入错 ...

  7. css中margin上下外边距重叠问题

    css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin, ...

  8. 最详细的div边距合并的问题和解决方法

    对于前端来说写页面是最基础的东西了,但是想不到还是有人不理解边距合并的问题,昨天有网友问我为什么设置的margin不是我设置的实际效果? 好吧,废话不多说,下面来说一下关于margin合并的问题. 解 ...

  9. C语言中关于POW在不同状态下四舍五入的解决方法

    这是今天作业中的一个代码: #include <stdio.h>#include<math.h>int main(){ printf("请输入一个整数:") ...

随机推荐

  1. 标准SVD和改进的SVD

    参考链接:http://www.cnblogs.com/yangxiao99/p/4752890.html 参考链接:http://www.cnblogs.com/yangxiao99/p/47529 ...

  2. 每天收获一点点------Hadoop之HDFS基础入门

    一.HDFS出现的背景 随着社会的进步,需要处理数据量越来越多,在一个操作系统管辖的范围存不下了,那么就分配到更多的操作系统管理的磁盘中,但是却不方便管理和维护—>因此,迫切需要一种系统来管理多 ...

  3. nefu117 素数个数的位数，素数定理

    素数个数的位数 Time Limit 1000ms Memory Limit 65536K description 小明是一个聪明的孩子,对数论有着非常浓烈的兴趣.他发现求1到正整数10n 之间有多少 ...

  4. oracle----sqlldr用法（转）

    SQL*LOADER是ORACLE的数据加载工具,通常用来将操作系统文件迁移到ORACLE数据库中.SQL*LOADER是大型数据仓库选择使用的加载方法,因为它提供了最快速的途径(DIRECT,PAR ...

  5. DFS-leetcode Combination Sum I/I I

    深度优先搜索(DFS)它是一个搜索算法.第一次接触DFS它应该是一个二进制树的遍历内部,二叉树预订.序和后序实际上属于深度遍历-first.在本质上,深度优先搜索,遍历中则看到了更纯正的深度优先搜索算 ...

  6. ssh 综合

    文件夹结构: 搭建项目: 1.创建web项目 2.创建各种包. com.atguigu.surveypark.dao.impl com.atguigu.surveypark.model com.atg ...

  7. React.js再探（三）

    很多时候,组件实例的外观和行为我们通过props进行定制就可以了.因为任何时候,组件实例的表现只跟 传过来的props属性 相关. 我们称这种为 无状态/ stateless 组件 即它自身是 无记忆 ...

  8. 【云图】如何制作全国KTV查询系统？

    原文:[云图]如何制作全国KTV查询系统? 摘要:本文以[唱吧]531麦霸音乐节为案例,详细解读了如何导入自有数据到高德云图,并进行检索和展示.最后,调起高德mobile地图来进行路线规划和周边查询. ...

  9. jsp的&lt;%%&gt;

    于jsp于 可以使用<% %> 嵌入java代码,简称jsp文字. 可以使用<% -- -- %> 凝视,这是jsp注视 可以使用<%! %> 声明全局变量 版权声 ...

  10. 教你一步一步部署.net免费空间OpenShift系列之四------绑定域名、使用CDN加速

    很抱歉这几天没有时间,有人问我怎么绑定域名的问题也没有答复,下面进入正题,惊闻ASP.Net要开源了,难道.Net春天要来了?不废话,上回书说,部署完毕ASP.Net网站后,直接访问不能访问(嗯,众所 ...