【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)

今天开发项目中碰到一个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的鬼哥!

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)

评论 19

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    底部不是3像素。。。随li字体大小及高度变化的。

    其实别让li获得layout就能解决。或者设置li {vertical-align:middle}也解决。

    shadow10年前 (2009-08-25)回复
  2. #-48

    shadow 是正确的

    aaa9年前 (2009-09-03)回复
  3. #-47

    这个不算3PX问题.

    ㄑ可乐ㄑㄑ(stri)9年前 (2009-09-08)回复
  4. #-46

    这个问题是字体大小引起的,已测试,只在IE6和7中有这问题!

    actualist889年前 (2009-10-20)回复
  5. #-45

    其实float布局能解决很多莫名其妙的bug。。常试试会发现惊喜的。

    前端开发9年前 (2010-05-03)回复
  6. #-44

    或者设置li {vertical-align:text-top}也解决。

    啄米鸟9年前 (2010-07-16)回复
  7. #-43

    调试ie6就和撞大运似地,不过真的太纠结了

    liuxin8年前 (2010-12-14)回复
    • IE6的bug解决关键在积累和经验

      8年前 (2010-12-14)回复
  8. #-42

    设置li {font-size:0}也可解决。

    苏昊8年前 (2010-12-25)回复
  9. #-41

    常用的方法就那么几种,多试试就有有惊喜发现的

    朱宝祥7年前 (2011-10-14)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏