今天开发项目中碰到一个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. [原]关于在 iOS 中支持 DLNA

    目前国内的视频播放器中,支持 DLNA 播放比较好的是:腾讯视频. 刚才反编了一下他们的代码,发现使用了一个开源库, 地址:https://github.com/FuruyamaTakeshi/DLN ...

  2. 通过DialogFragment从DatePicker或TimePicker中获取日期数据

    通过DialogFragment从DatePicker或TimePicker中获取日期数据 一个activity类,里面存有date和time的变量,想通过dialogfragment的方式获取用户输 ...

  3. js chart

    如何在我们项目中利用开源的图表(js chart)   最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长! 这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一 ...

  4. UIKit类结构图

  5. DSP TMS320C6000基础学习（4）—— cmd文件分析

    DSP中的CMD文件是链接命令文件(Linker Command File),以.cmd为后缀. 在分析cmd文件之前,必需先了解 (1)DSP具体芯片的内存映射(Memory Map) (2)知道点 ...

  6. 【NET】Winform分页控件初探

    public partial class WinFormPager : UserControl { ; /// <summary> /// 当前页 /// </summary> ...

  7. 使用brew安装软件

    使用brew安装软件 brew 又叫Homebrew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件, 只需要一个命令, 非常方便 brew类似ubuntu系统下的apt- ...

  8. 最受欢迎的Web开发工具

    1)WebBuilderWebBuilder是一款开源的可视化Web应用开发和运行平台.基于浏览器的集成开发环境,可视化和智能化的设计,能轻松完成常规应用和面向手机的移动应用开发:高效.稳定和可扩展的 ...

  9. Windows 安装Mongoliadb

    1. 下载 下载地址: http://www.mongodb.org/downloads 我这里用的是:mongodb-win32-x86_64-2008plus-2.4.5.zip 2. 设置目录 ...

  10. 统计知识选讲（一）——主成分分析（PCA）的思想

    主成分分析的主要目的是希望用较少的变量去解释原来资料中的大部分变异,将我们手中许多相关性很高的变量转化成彼此相互独立或不相关的变量,从而达到降维的目的.在原始数据“预处理”阶段通常要先对它们采用PCA ...