[温故而知新]再谈IE中li之间高度空隙的问题

时隔两年之后,再次碰到IE6、IE7下li高度占用的bug,2008年的文章在这里

之前的老办法还是能解决问题的,然后顺便研究了一下。

首先是症状的发生条件:

  1. IE6、IE7
  2. li内嵌其他容器,不仅限于超链接,我测试过span等也有此问题
  3. 高度低于某个值,这个值我没有严格测试过,但是我把li的高度设置成30px的时候没问题,18px的时候就有问题

问题解决办法:

  1. 给li附加样式

    1
    2
    3
    4
    li.classname {
    float: left;
    width: 100%;
    }
  2. 将li设置成inline,给内嵌容器设置宽度

    1
    2
    3
    4
    5
    6
    7
    8
    9
    li.classname {
    height: 18px;
    line-height: 18px;
    display:inline;
    }
    li.classname a {
    display: block;
    width: 100%;
    }