IE6/IE7中li底部4px间隙的Bug

日期:2020-09-22 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

当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特性之1: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的值是3者之1便可。

拷贝编码
编码以下:

<!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>