1

その 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 項目の間に多くの空白があることがわかります。

height:1px; を適用しようとしました。IE のみのcss 関連ファイル。運がない。

空白のバグがなくなるように、hasLayout を適切にトリガーするにはどうすればよいでしょうか?

4

2 に答える 2

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;
}
于 2011-12-04T10:39:23.083 に答える
0

修正はvertical-align: bottom;、リスト項目に設定することです。

于 2012-06-20T10:13:33.543 に答える