当li的子元素中有浮动（float）时，IE6/IE7中<li>元素的下面会产生4px空隙的bug。

代码如下:

<ul class="list">

<li><div>vapour</div></li>

<li><div>百度</div></li>

<li><div>淘宝</div></li>

<li><div>迅雷</div></li>

</ul>

经过测试发现：li的子元素浮动是这个bug产生的必要条件，这个bug产生的充要条件是li的子元素浮动并且li设置了 以下CSS属性之 一：width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。

知道了这个bug的产生条件，所以解决方法也就有了：
方法1 ：
#list div设置clear:left|both，这时#list li不能设置width、height、zoom。

方法2 ：
#list li设置float:left，这时#list li可以设置width、height、zoom。
#list li设置clear:left|both，这时#list li不能设置width、height、zoom。

方法3 ：
IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。太怪异了，只要加上vertical-align的值是三者之一即可。

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>IE6/IE7中li底部3px的Bug</title>

<style type="text/css">

ul { margin: 0; padding: 0; list-style: none; }

hr { clear: both; }

.list li { width: 420px; }

.list div { float: left; width: 400px; height: 24px; background: red; }

.v-top div { vertical-align: top; }

.v-middle div { vertical-align: middle; }

.v-bottom div { vertical-align: bottom; }

</style>

</head>

<body>

<ul class="list">

<li><div>vapour</div></li>

<li><div>百度</div></li>

<li><div>淘宝</div></li>

<li><div>迅雷</div></li>

</ul>

<hr />

<ul class="list v-top">

<li><div>vapour</div></li>

<li><div>百度</div></li>

<li><div>淘宝</div></li>

<li><div>迅雷</div></li>

</ul>

<hr />

<ul class="list v-middle">

<li><div>vapour</div></li>

<li><div>百度</div></li>

<li><div>淘宝</div></li>

<li><div>迅雷</div></li>

</ul>

<hr />

<ul class="list v-bottom">

<li><div>vapour</div></li>

<li><div>百度</div></li>

<li><div>淘宝</div></li>

<li><div>迅雷</div></li>

</ul>

</body>

</html>

IE6/IE7中li底部4px空隙的Bug的更多相关文章

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

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

  2. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

  3. 解决document.getElementById("")在IE7中误读成name的bug

    <!DOCTYPE html>      <html lang="en">      <head>          <meta char ...

  4. IE6 IE7下li间距、高度不一致问题(转)

    http://www.phpddt.com/dhtml/926.html 问题描述:li的高度在IE6 IE7间距高度和其他浏览器不一致,即便设定了高度,IE6,7中,仍比其他浏览器要高. 解决方法: ...

  5. IE6/IE7中display:inline-block解决办法

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

  6. 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 < ...

  7. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  8. span 右浮动折行 解决ie6/7中span右浮动折行问题

    RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻 ...

  9. inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法

    在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如: <a href="#">Button< ...

随机推荐

  1. KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序

    在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型. 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术. 例如: <a href=& ...

  2. MVC：The name 'Scripts' does not exist in the current context

    汇总:http://www.cnblogs.com/dunitian/p/4523006.html#efmvc 解决:在View下面的Web.Config的namespaces添加 <add n ...

  3. SQL 联合查询 + XML解析

    (select a.EBILLNO, a.EMPNAME, a.APPLYDATE, b.HS_NAME, ), ),'') as SUMMARY, cast(c.XmlData as XML).va ...

  4. scikit-learn 朴素贝叶斯类库使用小结

    之前在朴素贝叶斯算法原理小结这篇文章中,对朴素贝叶斯分类算法的原理做了一个总结.这里我们就从实战的角度来看朴素贝叶斯类库.重点讲述scikit-learn 朴素贝叶斯类库的使用要点和参数选择. 1. ...

  5. preg_match的isU代表什么意义

    正则后面的/(.*)/isU  ,“isU”参数代表什么意思?这是正则中的修正符.i是同时查找大小写字母,s是圆点(.)匹配所有字符,包括换行符.如果没有设定s,则不包括换行符.U是反转了匹配数量的值 ...

  6. 表空间基于时间点的恢复(TSPITR)

    环境:RHEL 6.4 + Oracle 11.2.0.4 准备模拟环境 1. 验证表空间的依赖性 2. 确定执行TSPITR后会丢失的对象 3. 自动执行TSPITR Reference 准备模拟环 ...

  7. 【JS】heatmap.js v1.0 到 v2.0，详细总结一下:)

    前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这 ...

  8. [Nancy On .Net Core Docker] 轻量级的web框架

    .net core现在已经有了大的发展,虽然笔者现在已经从事python开发,但是一直在关注.net的发展,在逛博客园的时候,发现有大家都会提到Nancy这个框架,在简单的使用之后,发现竟然是如此的简 ...

  9. grep命令详解

      用法格式 grep [option] pattern file   实验文件 [root@zejin240 tmp]# cat testdir/tfile 1 #include <stdio ...

  10. SQL Server时间粒度系列

        工作中经常遇到针对业务部门提出不同时间粒度(年.季度.月.周.日等等日期时间粒度,以下简称时间粒度)的数据统计汇总任务,也看到不少博友针对这方便的博文,结合SQL Server的日期时间函数和 ...