Question

以下是HTML的一部分：

<nav id="main-navigation">
<ul>
    <li><a href="#" target="_self">lorem ipsium lorem ipsium lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem ipsium lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem</a></li>                     
</ul>
</nav>

这是CSS：

#main-navigation ul li a {    
    display:block;
    font-size: .8em;
    background: lime url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif") no-repeat right center;
    border-top: 1px dotted #ccc;
    color:#000; 
    padding: 2px 0;
}

#main-navigation ul li a.last {
    border-bottom: 1px dotted #ccc;
}


#main-navigation ul li a:hover,
#main-navigation ul li a:focus,
#main-navigation ul li a:active{
    background: red url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif") no-repeat right center;
    color:#fff
}

我希望不要更改html标记。

如果你在好的浏览器上然后在IE 7上看到这个，你会发现IE7上的LI项目之间有很多空格。

我尝试过应用身高：1px;在仅IE的css相关文件上的 a 上。没有运气。

如何正确触发hasLayout以便白色空间bug可以消失？

Answer 1

解决方案：

HTML部分：

 <!--[if lt IE 9]>
  <link rel="stylesheet" href="badbrowser.css"/>
<![endif]-->

badbrowser.css的CSS部分：

/* Fix for vertical list LI white space - hasLayout trigger */
#main-navigation li a {
    display:inline-block;
}

#main-navigation li a {
    display:block;
}

Answer 2

修复方法是在列表项上设置vertical-align: bottom;。

如何针对IE 7空白bug触发此li上的hasLayout

2 个答案: