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

    CGI是一个连接外部应用程序到信息服务器(比如HTTP或者网络服务器)的标准.一个简单的HTML文档是无交互后台程序,它是静态的,也就是说它处于一个不可变的状态,即文本文件不可以变化.相反地,CGI程 ...

  2. vs2013使用初体验

    刚安装好vs2013 , 初步体验了一把, 下面是我目前感受到的改变(对比vs2012) 1. 任务栏图标变了 (左边vs2013, 右边vs2012)    2. 开始界面 (vs2012有ligh ...

  3. Object-c学习之路二（oc内存管理黄金法则1）

    今天看了看oc的内存管理,自己管理内存不能随便的release和retain 法则会出现野指针等错误.下面以人和读书的例子做练习. 1.主函数 // // main.m // MemoryManage ...

  4. 基于 WebSocket 构建跨浏览器的实时应用

    Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用 Socket.IO 是一个功能非常强大的框架,能够帮助你构建基于 WebSocket 的跨浏览器的实时应用.支持主流浏览器,多 ...

  5. [Ext JS 4] contentEL,renderTo, applyTo 释义与区别

    前言 若干年前,使用Ext JS 3 开发了一个系统. 随着Ext JS 4的出现,总是会看到或听到关于Ext 比较多的言论是 : Ext JS 4 较Ext JS 3 有较大的改变. Ext JS ...

  6. 百万行mysql数据库优化（补充）

    我上大学的那个时候喜欢研究一些数据库的技术,那时候觉得数据处理很重要,而且数据优化也是相当重要的,看了很多数据库方面的资料,虽然在实际的项目也遇到过一些数据库优化的任务,完成之后还是有些心情愉快.但是 ...

  7. 解决Eclipse maven servlet-api-2.5.jar jar not loaded问题

    在Eclipse中用maven构建web项目时,如果在pom里写了servlet-api和jsp-api的依赖的话,即使scope为"provided",但在布署到tomcat时, ...

  8. apache cxf笔记之Spring客户端访问和调用webservice服务

    继续上次的spring服务的问题,这边介绍一种spring配置客户端的方法. 1.src目录下新建client-beans.xml文件 <?xml version="1.0" ...

  9. VB.NET调用SQL Sever存储过程

    概要: 本文介绍VB.NET使用创建并调用带有输入参数和输出参数的SQL Sever存储过程 本文代码首先检查要创建的存储过程再数据库中是否存在在.如果不存在,则代码创建一个存储过程,该过程一个参数来 ...

  10. 根据Mob官网的天气预报接口写了一个简单的demo

    第一步 自己注册一个应用,然后获取里面的 App Key,下载MobAPI SDK 然后拖入 MobAPI.framework 和 MOBFoundation.framework 到你的项目中 第二步 ...