すなわち、このLiでHaslayoutをトリガーする方法7ホワイトスペースバグ
-
27-10-2019 - |
質問
これが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;の上 a IEのみCSS関連ファイル。運はありません。
ホワイトスペースのバグがなくなるように、どのようにしてHaslayoutを適切にトリガーできますか?
解決
解決:
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;
}
他のヒント
修正は設定することです vertical-align: bottom;
リスト項目。
所属していません StackOverflow