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

======================================================

以前我们老是研究清除浮动，想不到今天却用增加浮动来解决问题。呵呵。

转载请注明转自《【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）》

【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）的更多相关文章

  1. 【IE6的疯狂之九】li在IE中底部空行的BUG

    曾经写过[IE6的疯狂之六]li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421: IE6 BUG大全: http://ww ...

  2. li在IE中底部空行的BUG

    li在IE中底部空行的BUG 但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:HTML代码: <ul> <li><a href="#" ...

  3. 【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

    ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明. 很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG ...

  4. 【IE6的疯狂之一】IE6中奇数宽高的BUG

    IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...

  5. 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG

    大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上 ...

  6. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  7. 【IE6的疯狂之五】div遮盖select的解决方案

    IE6以及一下版本下,选择框Select会覆盖Div中的内容一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容.由于Iframe的可以显示在Select上层,就可以解决这个问题.不 ...

  8. jq获取当前点击的li是ul中的第几个？

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

  9. 【IE6的疯狂之十二】一个display:none引起的3像素的BUG

    今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码:   <div style="width: ...

随机推荐

  1. Day1：T1 模拟 T2 拓扑排序

    T1:模拟 自己第一天的简直跟白痴一样啊...模拟都会打错.. 当时貌似在更新最大值的时候打逗比了... if((sum[x]==max && x<maxh) || sum[x] ...

  2. 红黑树LLRB

    LLRB——红黑树的现代实现 一.本文内容 以一种简明易懂的方式介绍红黑树背后的逻辑实现2-3-4树,以及红黑树的插入.删除操作,重点在2-3-4树与红黑树的对应关系上,并理清红黑树相关操作的来龙去脉 ...

  3. C#执行cmd命令

    public class Console : IRun { public Console(){ ; } public string Result { get; set; } public string ...

  4. ThreadPool&ManualResetEvent

    在多线程的程序中,经常会出现两种情况: 一种情况: 应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应 这一般使用ThreadPool(线程池)来解决: 另一种情况:线程 ...

  5. java版微信公众平台自定义菜单创建代码实现

    微信公众平台自定义菜单创建代码实现—java版 搞了两天的自定义菜单,终于搞定了,现在分享下心得,以便后来者少走弯路...... 好了,先看先微信官方的API 官方写的很详细,但是我看完后很茫然,不知 ...

  6. jquery 表单 清空

    做了个复杂查询的页面,字段太多了,填了一次,想清空挺麻烦的 $('#myform')[0].reset(); 虽然reset方法可以做到一部分,但是如果你有个元素是这样的 <input name ...

  7. grub 的安装与使用

    安装与使用grub 要开始探究 GRUB 的精妙之处,首先需要下载.编译和安装它.但不要害怕 -- 根本不会修改您的引导记录 -- 我们只是要编译和安装 GRUB,就像其它程序一样,在此过程中我们可以 ...

  8. [Android笔记1]Activity+Layout+Button

    线性布局(LinearLayout)是指view对象在父view中可按水平或垂直方向线性排列. 相对布局(RelativeLayout)是指view对象的排列依赖于各对象之间的相对位置. 下面是展示两 ...

  9. sphinx2.8.8的配置文件

    # # Sphinx configuration file sample # # WARNING! While this sample file mentions all available opti ...

  10. 在Xbox和Hololens 上部署、调试UWP App

    在Windows 10 Device 上,UWP App可以快速部署进行调试.PC(平板)和Phone就不用多说,网上的文章比较多.今天专门介绍一下怎么在Xbox One和HoloLens上部署调试U ...