IE6/IE7中li底部4px空隙的Bug
当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的更多相关文章
- IE6/IE7中li底部4px的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...
- IE6,IE7上设置body{overflow:hidden;}失效Bug
IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...
- 解决document.getElementById("")在IE7中误读成name的bug
<!DOCTYPE html> <html lang="en"> <head> <meta char ...
- IE6 IE7下li间距、高度不一致问题(转)
http://www.phpddt.com/dhtml/926.html 问题描述:li的高度在IE6 IE7间距高度和其他浏览器不一致,即便设定了高度,IE6,7中,仍比其他浏览器要高. 解决方法: ...
- IE6/IE7中display:inline-block解决办法
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
- 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 < ...
- span 右浮动折行 解决ie6/7中span右浮动折行问题
A floated box is shifted to the left or right until its outer edge touches the containing block edge ...
- span 右浮动折行 解决ie6/7中span右浮动折行问题
RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻 ...
- inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法
在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如: <a href="#">Button< ...
随机推荐
- jQuery源码分析系列(34) : Ajax - 预处理jsonp
上一章大概讲了前置过滤器和请求分发器的作用,这一章主要是具体分析每种对应的处理方式 $.ajax()调用不同类型的响应,被传递到成功处理函数之前,会经过不同种类的预处理(prefilters). 预处 ...
- CSS list-style属性控制ul标签样式
试一试 <style type="text/css" media="all"> ul { list-style-type: disc; } ul#c ...
- mysql数据库学习目录
前面的话 对于前端工程师来说,数据库并不是主要技能点,但是基本的增删改查操作还是需要了解的.小火柴将mysql数据库的学习记录整理如下 目录 前端学数据库之基础操作 前端学数据库之数据类型 前端学数 ...
- jQuery架构剖析
对于jQuery的整体架构,经典之处有三: 1.jQuery的无new构建 2.jQuery的链式调用 3.jQuery的插件接口 想必兄弟姐妹们也觉得这架构不错哈,但有时又畏惧去拜读大量的jQuer ...
- tn文本分析语言(三)：高级语法
标签(空格分隔): 未分类 高级操作 1.脚本表达式 用双引号包含的脚本被称为脚本表达式,目前支持嵌入Python. 脚本表达式只能在顺序表达式中使用.代码可以在三个位置存在: |位置|功能|例子| ...
- 移动前端开发-单页应用(spa)模型
一门新的技术诞生总会引来一番争议,单页Web应用程序也不例外,其最大的优势在于用户体验,对于内容的改动不需要加载整个页面:对服务器压力很小,消耗更少的带宽,与面向服务的架构更好地结合.使用HTML+C ...
- MyCAT常用分片规则之分片枚举
MyCAT支持多种分片规则,下面测试的这种是分片枚举.适用场景,列值的个数是固定的,譬如省份,月份等. 在这里,需定义三个值,规则均是在rule.xml中定义. 1. tableRule 2. fun ...
- php上传功能集后缀名判断和随机命名
form.php <html> <head> <meta http-equiv="content-type" content="text/h ...
- Android 数据库框架OrmLite的使用（一）
在这里记录下最基本的用法,官网上可了解相关的介绍. 1.下载OrmLite jar 在下载android的:ormlite-android-4.48.jar和ormlite-core-4.48.jar ...
- phpStorm入门
首先在官网上下载并安装:http://www.jetbrains.com/phpstorm/; 安装成功后需要激活: IntelliJ IDEA开源社区 提供了如下通用激活方法: 注册时选择Licen ...