IE6/IE7中li底部4px的Bug
时间:2022-05-15
本文章向大家介绍IE6/IE7中li底部4px的Bug,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug。
XHTML
<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 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=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>
- 通过执行计划中的CONCATENATION分析sql问题(r4笔记第16天)
- 《小美好》短评文本情感分析+生成词云
- 通过shell定制dbms_advisor.quick_tune(r4笔记第15天)
- 跨浏览器tab页的通信解决方案尝试
- 深度学习的GPU:深度学习中使用GPU的经验和建议
- socket.io搭配pm2(cluster)集群解决方案
- 用 Python 来刷微信「跳一跳」游戏的记录
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(十二)数据层优化-explain关键字及慢sql优化
- 高吞吐koa日志中间件
- 关于SQLRecoverableException问题的排查和分析(r4笔记第13天)
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(十三)数据层优化-表规范、索引优化
- node中的Stream-Readable和Writeable解读
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(六)一定要RESTful吗?
- 深入node之Transform
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 探花交友_搭建开发环境
- 编程体系结构(04):JavaIO流文件管理
- Hadoop框架:HDFS简介与Shell管理命令
- OpenCV的Mat类型以及基本函数使用
- Hadoop框架:HDFS读写机制与API详解
- 编程体系结构(06):Java面向对象
- RabbitMQ在分布式系统中的应用
- spring5新特性
- 进阶!MyBatis-Plus(基于 Springboot 演示)
- 运维人员常用的Linux命令总结
- Java反射机制的原理及在Android下的简单应用
- 温故而知新:MySQL存储引擎入门介绍
- 终于明白 Java 为什么要加 final 关键字了!
- 学习git这一篇就够了!!!
- 如何在nodejs中实现兄弟进程通信