li在IE中底部空行的BUG

但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:

HTML代码:

<ul>
  <li><a href="#">第1条连接</a></li>
  <li><a href="#">第2条连接</a></li>
  <li><a href="#">第3条连接</a></li>
</ul>

CSS代码:

* {padding:;margin:;}
li { }
li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}
li a:hover {background:#BBB;}

查看demo,请使用IE6查看:http://www.css88.com/demo/IE6_bug/ie6-li/ie6-bug.html

IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下,列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。
解决方案1:

* {padding:;margin:;}
li { }
li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;zoom:}
li a:hover {background:#BBB;}

就是在li a 样式中加入zoom:1;

解决方案2:

* {padding:;margin:;}
li { display:inline }
li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}
li a:hover {background:#BBB;}

就是在li 样式中加入display:inline ;

解决方法3(不推荐):

<ul>
<li><a href="#">第1条连接</a></li><li><a href="#">第2条连接</a></li><li><a href="#">第3条连接</a></li>
</ul>

或者

<ul>
<li><a href="#">第1条连接</a></li><li>
<a href="#">第2条连接</a></li><li>
<a href="#">第3条连接</a></li>
</ul>

就是将<li>标签写成一行;

解决方案4:(感谢.Roc Happyゞ提供的结局方案)

* {padding:;margin:;}
li { }
li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block; width:100% }
li a:hover {background:#BBB;}

就是在li a 样式中加入width:100%或者一个宽度值;

转载:http://www.css88.com

li在IE中底部空行的BUG的更多相关文章

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

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

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

    今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...

  3. IE6/IE7中li底部4px的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...

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

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

  5. Dreamweaver中清除php代码中多余空行的方法

    使用DW自带的搜索功能,利用正则表达式 使用正则表达式搜索:\r\n\s*\r\n即可搜到代码中的空行,再用回车符\n替换即可消除代码中的多余空行

  6. Excel日期中那个著名的bug

    一个软件中的bug能够持续多久?答案不一,大多数bug在软件测试阶段就已经被干掉,又有许多死在Preview阶段,抑或正式上线后不久被干掉,有些则伴随软件终生,直到下一代产品发布才寿终正寝,而Exce ...

  7. QuantLib 金融计算——修复 BatesProcess 中的两个 Bug

    QuantLib 金融计算--修复 BatesProcess 中的两个 Bug 我发现了 BatesProcess 中的两个 Bug: 基类 HestonProcess::factors 的返回值取决 ...

  8. WPF中Polyline拐角的bug

    原文:WPF中Polyline拐角的bug       Polyline绘制折线在小角度(比如几度)的时候会出现不连续的现象,形成拐角的两条线段中有一段会超出,角度越小越明显.       问题如下图 ...

  9. Python 去除字符串中的空行

    Python 去除字符串中的空行 mystr = 'adfa\n\n\ndsfsf' print("".join([s for s in mystr.splitlines(True ...

随机推荐

  1. redmine 2.5.2 安装后邮件无法发送

    找到redmine安装目录-apps->redmine->htdocs->conflg->configuration.yml email_delivery:    delive ...

  2. Yii系列教程(二):功能简介

    1 MVC架构 1.1处理流程 一个Web请求在Yii内部的执行流程如下图所示: 1.2组件角色 组件名 角色与责任 index.php 入口脚本.创建Application的单例对象. applic ...

  3. 成功BOSS的六大秘诀

    1.信念力 一个没有坚定信念的人,是不可能成为伟大企业家的.如果你认为自己行,你就一定行:如果你都认为自己不行了,那你就注定不行.在成功这条道路上,要勇敢地自我肯定和鼓励,这样才能带来巨大的创造力并最 ...

  4. android命名规范

    Android 开发规范 (陈杨) (一)注意事项 1. 编码方式统一用UTF-8. Android Studio默认已是UTF-8,只要不去改动它就可以了. 2. 缩进统一为4个空格,将Tab si ...

  5. STL六大组件之——适配器代表大会

    适配器也是一种常用的设计模式: 将一个类的接口转换为另一个类的接口,使得原本因接口不兼容而不能合作的两个类可以一起运作.STL提供三种适配器:改变容器接口的容器适配器.改变迭代器接口的迭代器适配器以及 ...

  6. grails中报Cannot create a session after the response has been committed异常的解决办法

    在grails中,我们在layouts\main.gsp中使用类似如下的代码来判断当前用户处于登录状态时显示相关的登录信息: <g:if test="${session.users}& ...

  7. ansible条件使用--实践

    ansible条件使用 1.条件使用最简单的方式 ansible中使用条件最简单的方式如下所示: [root@ansibleserver kel]# cat conditions.yml --- - ...

  8. 2014搜狗前端面经【A事业部】

    刚刚面完搜狗,有种莫名其妙的感觉,哪里莫名其妙呢?听我慢慢道来... 开始面试官就这简历,问了一些有的没的东西,都不深(好吧我承认之前的经历有点菜,没神马加分项啊). 后面开始技术面: 知识点1:JS ...

  9. Struts Convention Plugin 流程 (2.1.6+)

    首先添加lib: <dependency> <groupId>org.apache.struts</groupId> <artifactId>strut ...

  10. 怎么监视跟踪一个进程(Process)中的MS Unit Test DLL的详细性能(performance)【asp.net C#】

    Sample This tutorial will show how to instrument a unit test DLL for performance profiling. Visual S ...