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

曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题),原文地址: https://www.html.cn/archives/421

IE6 BUG大全: https://www.html.cn/archives/579

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

2009-04-13_140600

HTML代码:

[code=”html”]

[/code]

CSS代码:

[code=”css”]

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

[/code]

查看demo,请使用IE6查看:https://www.html.cn/demo/IE6_bug/ie6-li/ie6-bug.html

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

解决方案1:

[code=”css”]

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

[/code]

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

解决方案2:

[code=”css”]

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

[/code]

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

解决方法3(不推荐):

[code=”html”]

[/code]

或者

[code=”html”]

[/code]

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

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

[code=”css”]

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

[/code]

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【IE6的疯狂之九】li在IE中底部空行的BUG

评论 19

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    简直无法用感谢来说了!困扰我很久的问题,终于解决了!!
    非常感谢!!!
    貌似为li加dispaly:inline 在我这不能够解决这个问题

    Daniel10年前 (2009-04-14)回复
  2. #-48

    为什么啊。能发代码过来吗?

    10年前 (2009-04-14)回复
  3. #-47

    我一直是用
    width:100%来解决的,呵呵,有时候不行的话,再加个float

    当空接龙10年前 (2009-04-22)回复
  4. #-46

    上面的方法是否通过浏览器兼容测试?

    iaug10年前 (2009-04-27)回复
  5. #-45

    测试浏览器IE6-IE8,FF,OP,SA,CH

    10年前 (2009-04-27)回复
  6. #-44

    有些情况是加vertical-align

    Q10年前 (2009-05-13)回复
  7. #-43

    还有一种办法就是将li浮动,然后宽度100%

    bujichong10年前 (2009-05-15)回复
  8. #-42

    我也遇到过这种情况,不过是给li内标签加个 _height:1%;

    easyQuery10年前 (2009-06-06)回复
  9. #-41

    用display:inline ;在ie下,下边框不见了

    kelly9年前 (2009-08-31)回复
  10. #-40

    只要激发haslyout就能解决:可以设置以下CSS:
    * display: inline-block
    * height: (任何值除了auto)
    * float: (left 或 right)
    * position: absolute
    * width: (任何值除了auto)
    * zoom: (除 normal 外任意值)

    ㄑ可乐ㄑㄑ(stri)9年前 (2009-09-08)回复
  11. #-39

    width还是触发了layout

    天堂左我往右9年前 (2009-10-24)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏