【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）
时间：2009年03月26日作者：愚人码头查看次数:10,220 views评论次数：19
今天开发项目中碰到一个li在IE中的BUG，先来看设计原型（如图：）
两个红色中间是<li>1px的底边框；
我写的代码如下：
=============================================================
<!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>无标题文档</title>
<style type=”text/css”>
<!–
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}
body{font:400 12px/150% Tahoma,SimSun,Arial;color:#333;background-color:#FFFFFF}
select{font-size:12px}
ul,li{list-style:none}
img{border:none}
ul{ border-bottom:#FDD496 2px solid;border-top:#FDD496 2px solid; height:263px}
ul li{ height:43px; border-bottom:#DCDCDC 1px solid; }
.po-txt{ float:left; width:146px; height:31px; background-color:#f00; padding:12px 0 0; font-size:14px; font-weight:700; text-align:right}
–>
</style></head>
<body>
<ul>
<li>
<div class=”po-txt”>通行证：</div>
</li>
<li>
<div class=”po-txt”>昵称：</div>
</li>
</ul>
</body>
</html>
=================================================================
在IE6，IE7下显示为（如图）：貌似<li>多了个 margin-bottom:3px；
几经周折，找到了Qzone的鬼哥帮忙解决，他说在<li>上加float:left；
问题解决了，当然根据设计稿的精神还要加个width:100%;
完整的样式如下：
=====================================================
<style type=”text/css”>
<!–
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}
body{font:400 12px/150% Tahoma,SimSun,Arial;color:#333;background-color:#FFFFFF}
select{font-size:12px}
ul,li{list-style:none}
img{border:none}
ul{ border-bottom:#FDD496 2px solid;border-top:#FDD496 2px solid; height:263px}
ul li{ height:43px; border-bottom:#DCDCDC 1px solid; float:left; width:100%;}
.po-txt{ float:left; width:146px; height:31px; background-color:#f00; padding:12px 0 0; font-size:14px; font-weight:700; text-align:right}
–>
</style>
======================================================
以前我们老是研究清除浮动，想不到今天却用增加浮动来解决问题。呵呵。
特别感谢Qzone的鬼哥！
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）》
说明
底部不是3像素。。。随li字体大小及高度变化的。
其实别让li获得layout就能解决。或者设置li {vertical-align：middle}也解决。
[回复]
shadow 是正确的
[回复]
这个不算3PX问题.
[回复]
这个问题是字体大小引起的，已测试，只在IE6和7中有这问题！
[回复]
其实float布局能解决很多莫名其妙的bug。。常试试会发现惊喜的。
[回复]
或者设置li {vertical-align：text-top}也解决。
[回复]
调试ie6就和撞大运似地，不过真的太纠结了
[回复]
愚人码头 回复于:十二月 14th, 2010 at 11:59 上午
IE6的bug解决关键在积累和经验
[回复]
设置li {font-size:0}也可解决。
[回复]
常用的方法就那么几种，多试试就有有惊喜发现的
[回复]