1、 li中仅包含a,span等内联(行内)元素2、触发条件： li元素的layout被触发(通常为设置了宽或高，设置overflow:hidden在IE7下同样触发layout)，且a或span元素被设置了display: block. (即使a或span不设置dis

一、症状

两个li元素之间, 多出3px的垂直间距, 即使将li的margin设置为0, 也依然存在.

二、受影响的浏览器
IE6, 7

三、出现条件（有两种）

第一种情况：
1、 li中仅包含a,span等内联(行内)元素
2、触发条件： li元素的layout被触发(通常为设置了宽或高，设置overflow:hidden在IE7下同样触发layout)，且a或span元素被设置了display: block.
 (即使a或span不设置display:block，即使不是a或span等内联元素而是用p块级元素，li也同样存在1px的垂直间距)

运行以下代码，查看BUG：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>ipmtea.net下午茶</title>
  6. <style type="text/css">
  7. div{padding:50px;background:blue;}
  8. *{margin:0;padding:0;}
  9. /*以上CSS是为了方便观察*/
  10. ul {
  11. background:yellow;
  12. }
  13. ul li {
  14. background:orange;
  15. width:500px;/*hasLayout*/
  16. }
  17. a,span {
  18. display: block;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div>
  24. <ul>
  25. <li><span>ipmtea.net下午茶</span></li>
  26. <li><a>下午茶ipmtea.net</a></li>
  27. </ul>
  28. </div>
  29. </body>
  30. </html>

　　

3、解决办法：
(1) 去掉li中触发layout的样式;
(2) 触发a元素的layout, 具体做法有以下几种:
* 显式的给a元素设置一个宽或高;
* 将display: block改为display: inline-block;
* 设置zoom: 1;

 
 
 
 
 
第二种情况：
1、 li中包含1个或多个子元素, 子元素类型不限(全为内联元素, 全为块元素或两者同时出现)
2、 触发条件：  li元素的layout被触发(通常为设置了宽或高，设置overflow:hidden在IE7下同样触发layout)，且子元素全部被设置为浮动.
（在这里由于li的子元素浮动，存在清除浮动闭合浮动元素的问题，在IE下，只要容器hasLayou，则容器的范围会延伸至浮动元素所在宽高度从而闭合浮动元素，详情可阅读这篇文章《hasLayout详解》）

运行以下代码，查看BUG：

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>ipmtea.net下午茶</title>
  6. <style type="text/css">
  7. div{padding:50px;background:blue;}
  8. *{margin:0;padding:0;}
  9. /*以上CSS是为了方便观察*/
  10. ul {
  11. background:yellow;
  12. }
  13. ul li {
  14. background:orange;
  15. width:500px;/*hasLayout*/
  16. }
  17. a,span {
  18. float:left;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div>
  24. <ul>
  25. <li><span>ipmtea.net下午茶</span></li>
  26. <li><a>下午茶ipmtea.net</a></li>
  27. </ul>
  28. </div>
  29. </body>
  30. </html>

　　

3、 解决办法： 
将li设置为float.

IE6 IE7 hasLayout bug之li间的3px垂直间距的更多相关文章

  1. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  2. IE6/IE7/IE8 FF常见问题解决

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-08) <style type="text/css" > *{ margin:0px a ...

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

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

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

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

  5. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  6. ie6,ie7,ie8 css bug汇总以及兼容解决方法

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

  7. 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

  8. IE6&IE7 bug

    IE6 Bugs 1 .不支持用样式设置 <abbr> 元素 2 .不支持以连字符和下划线开头的 class 和 ID 名 3 . <select> 元素总是出现在堆叠最上面, ...

  9. IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...

随机推荐

  1. Redis安装及配置(Linux)

    ubuntu 16.04安装redis-server apt-get install redis-server 启动.停止.重启.重新加载.查看状态 /etc/init.d/redis-server ...

  2. Java中自定义异常

    /*下面做了归纳总结,欢迎批评指正*/ /*自定义异常*/ class ChushulingException extends Exception { public ChushulingExcepti ...

  3. MVC系列之二 Model层细解

    一.简介 在上一篇将MVC的时候,有很有朋友对简单三层的概念不是很熟悉,因此,今天进行简单三层的一个简单介绍,同时为理解MVC中的Model做知识累计. 传统的三层主要指的是UI层,BLL层,DAL层 ...

  4. Windows7下安装搭建Ngnix教程

    简介: Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 服务器. Nginx 是由 Igor Syso ...

  5. SSL/TLS 原理详解

    本文大部分整理自网络,相关文章请见文后参考. SSL/TLS作为一种互联网安全加密技术,原理较为复杂,枯燥而无味,我也是试图理解之后重新整理,尽量做到层次清晰.正文开始. 1. SSL/TLS概览 1 ...

  6. iOS开发学习笔记:基础篇

    iOS开发需要一台Mac电脑.Xcode以及iOS SDK.因为苹果设备都具有自己封闭的环境,所以iOS程序的开发必须在Mac设备上完成(当然,黑苹果应该也是可以的,但就需要花很多的精力去折腾基础环境 ...

  7. 分区格式化mkfs

    mkfs —  build a Linux filesystem 用法举例: mkfs.ext3  /dev/sdb1 #把sdb1格式化为ext3文件系统 也可以写成 mkfs -t ext3 /d ...

  8. Maven常用命令（转）

    Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ Maven常用命令: 1. 创建Maven的普通 ...

  9. Java I/O NIO学习

    给出一个学习的链接讲的很全.. http://ifeve.com/java-nio-all/ 上边的是中文翻译的这里是原地址:http://tutorials.jenkov.com/java-nio/ ...

  10. iOS - KVC 键值编码

    1.KVC KVC 是 Key-Value Coding 的简写,是键值编码的意思,属于 runtime 方法.Key Value Coding 是 cocoa 的一个标准组成部分,是间接给对象属性设 ...