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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

HTML 入门笔记 - 初识HTML

基础框架 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...

46650
来自专栏web开发

VUE滚动条插件——vue-happy-scroll

最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue...

49340
来自专栏前端知识分享

第58天:简单焦点轮播图

9530
来自专栏大前端_Web

移动端Web页面常见问题解决

经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960*640...

26920
来自专栏Java帮帮-微信公众号-技术文章全总结

HTML5 — header

最近,越来越多的人 HTML5 感兴趣,并开始广泛的使用其中的新元素,其中有一个就是 <header> 元素。 下面我们来谈谈什么时候能用它,什么时候不能用它,...

40470
来自专栏一“技”之长

AppleWatch开发入门五——菜单控件的使用

        菜单也是WatchOS中一个重要的交互方式,限于Watch的屏幕尺寸,若将所有用户交互控件都紧密的排列进展示的UI中,那样难免会使用户操作困难,...

25110
来自专栏安富莱嵌入式技术分享

【二代示波器教程】第11章 示波器设计—功能模块划分

二代示波器的界面上做了五个按钮,分别用于不同功能的配置,本章节就为大家讲解这五个按钮实现的功能。

12420
来自专栏攻城狮的动态

iOS视图编程指南(View Programming Guide for iOS)(译)

29940
来自专栏编程微刊

6款 jQuery Lightbox图片查看触控插件

偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来。 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www...

52140
来自专栏大数据钻研

css print

最近做表单打印,遂整理了一些打印相关的内容。 说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数...

32330

扫码关注云+社区

领取腾讯云代金券