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

时间：2022-09-23 19:05:18

今天开发项目中碰到一个li在IE中的BUG，先来看设计原型（如图：）【IE6的疯狂之六】li在IE中底部3像素的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；

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

几经周折，找到了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透明&lpar;全集&rpar;

    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&colon;none引起的3像素的BUG

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

随机推荐

  1. Java 中 手动抛出异常&colon; throw new Exception&lpar;&quot&semi;错误信息&quot&semi;&rpar; 错误信息的获得

    当然需要先用try catch捕获,但注意new Exception("")括号里的字符串其实是异常原因,所以获取是要用ex.getCause().getMessage() int ...

  2. 一个帖子学会Android开发四大组件

    来自:http://www.cnblogs.com/pepcod/archive/2013/02/11/2937403.html 这个文章主要是讲Android开发的四大组件,本文主要分为 一.Act ...

  3. IOS之代理

    作者:王泽豪 时间:2016年4月22日         ★代理是一种设计模式,它的价值在于通过一个统一的模式,解决一个原本并不方便.甚至是几乎不可能解决的问题.         ★代理有两个关注点: ...

  4. android离线安装adt

    打开Eclipse, 在菜单栏上选择help->Install New SoftWare 出现如下界面: 点击 Add按钮,出现如下界面 在Name这而随意输入一个名字:ADT15:点击打开Ar ...

  5. php单例设计模式

    class car { static $obj = null; private function __construct(){} static function getObj(){ if(is_nul ...

  6. java版Web Socket，实现消息推送

    # web socket是什么? WebSocket协议是基于TCP的一种新的网络协议. 它实现了浏览器与服务器全双工(full-duplex)通信,允许服务器主动发送信息给客户端. ## 用途 实时 ...

  7. 2、一、Introduction&lpar;入门&rpar;：1、Application Fundamentals&lpar;应用程序基础&rpar;

    一.Introduction(入门) 1.Application Fundamentals(应用程序基础) Android apps are written in the Java programmi ...

  8. 使用node-webkit包装浏览器

    node-webkit简称nwjs:开源地址 https://github.com/nwjs/nw.js 参考博客 https://www.cnblogs.com/soaringEveryday/p/ ...

  9. Redis（二）CentOS7安装Redis4&period;0&period;10与集群搭建

    一 Redis单机安装 1 Redis下载安装 1.1 检查依赖环境(Redis是C语言开发,编译依赖gcc环境) [root@node21 redis-]$ gcc -v -bash: gcc: c ...

  10. java Webservice&lpar;一&rpar;HttpClient使用&lpar;二&rpar;

    HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 java.net 包中已经提供了 ...

相关文章