IE6 IE7 hasLayout bug之li间的3px垂直间距
1、 li中仅包含a,span等内联(行内)元素2、触发条件： li元素的layout被触发(通常为设置了宽或高，设置overflow:hidden在IE7下同样触发layout)，且a或span元素被设置了display: block. (即使a或span不设置dis
一、症状
三、出现条件（有两种）
第一种情况：
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：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ipmtea.net下午茶</title>
<style type="text/css">
div{padding:50px;background:blue;}
*{margin:0;padding:0;}
/*以上CSS是为了方便观察*/
ul {
background:yellow;
}
ul li {
background:orange;
width:500px;/*hasLayout*/
}
a,span {
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><span>ipmtea.net下午茶</span></li>
<li><a>下午茶ipmtea.net</a></li>
</ul>
</div>
</body>
</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)，且子元素全部被设置为浮动.
运行以下代码，查看BUG：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ipmtea.net下午茶</title>
<style type="text/css">
div{padding:50px;background:blue;}
*{margin:0;padding:0;}
/*以上CSS是为了方便观察*/
ul {
background:yellow;
}
ul li {
background:orange;
width:500px;/*hasLayout*/
}
a,span {
float:left;
}
</style>
</head>
<body>
<div>
<ul>
<li><span>ipmtea.net下午茶</span></li>
<li><a>下午茶ipmtea.net</a></li>
</ul>
</div>
</body>
</html>
将li设置为float.
IE6 IE7 hasLayout bug之li间的3px垂直间距的更多相关文章
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- IE6/IE7/IE8 FF常见问题解决
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-08) <style type="text/css" > *{ margin:0px a ...
- IE6/IE7中li底部4px空隙的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...
- IE6/IE7中li底部4px的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- ie6,ie7,ie8 css bug汇总以及兼容解决方法
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
- IE6&IE7 bug
IE6 Bugs 1 .不支持用样式设置 <abbr> 元素 2 .不支持以连字符和下划线开头的 class 和 ID 名 3 . <select> 元素总是出现在堆叠最上面, ...
- IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
随机推荐
- 【Java】Map杂谈，hashcode()、equals()、HashMap、TreeMap、LinkedHashMap、ConcurrentHashMap
参考的优秀文章: <Java编程思想>第四版 <Effective Java>第二版 Map接口是映射表的结构,维护键对象与值对象的对应关系,称键值对. > hashco ...
- CTabCtrl的使用
1.在主窗口中定义一个CtabCtrl,添加变量m_tabctrl; 2.添加两个子窗口IDD_ONE_DIALOG,IDD_TWO_DIALOG(新建对话框,然后双击界面添加头文件和cpp),属性为 ...
- win7下如何安装JDK
第一步:点击下载好的JDK安装程序,百度一下,网上很多,然后弹出如下界面,点击“下一步”即可. 2 第二步:此时比较关键,设置安装的路径,可以事先建立一个文件夹,以在D盘为例,如D:\java. 3 ...
- Cheatsheet: 2014 02.01 ~ 02.28
Database Managing disk space in MongoDB When to use GridFS on MongoDB .NET The Past, Present, and Fu ...
- 【原文】前端程序员必须知道的高性能Javascript知识
原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...
- MySQL(六) —— 自定义函数
自定义函数 用户自定义函数(user-defined function, UDF)是一种对MySQL扩展的途径,其用法与内置函数相同. 参数,返回值 创建自定义函数 CREATE FUNCTION f ...
- [POJ1830]开关问题（高斯消元，异或方程组）
题目链接:http://poj.org/problem?id=1830 题意:中文题面,求的是方案数. 首先可以知道, 如果方案数不止一个的话,说明矩阵行列式值为0,即存在自由变元,由于变量只有两种状 ...
- sql 基础练习题
select * from Student;select * from Courseselect ;select* from Teacherselect ;select * from SC;--创建测 ...
- LINUX DIFF命令详解
刚才在和公司做离线IP对比,最后手工了,感觉还是比较麻烦的,遇到数据很大的时候不能手工进行了 本想用linux下的DIFF来进行对比,发现结果很乱.时间很紧最后还是手工了. 现在忙完要认认真真学习一下 ...
- CUBRID学习笔记 5 错误码
服务器错误码 AS Error Code Number CAS Error Code Error Message Note -1000 CAS_ER_DBMS "CUBRID DBMS Er ...