固定幅ul
とインラインli
があります。 li
の中には、a
のリンクがあります。私は本質的にタブを作っている。 li
のすべてを、固定幅をul
の幅に直接設定しました。これはChromeで正常に動作します。 OperaとFirefoxではピクセルが消えています。しかしIEでは、li
は新しい行にラップアラウンドします。私は自分のHTMLとCSSを可能な限り削除し、それをJSFiddleに入れました。私はいくつかの悪い理由のために、font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
がこれを起こすことを発見しました。私はそれを削除すると、それは修正されました。私はWHYを知りたいですか?フォントファミリがラッピング問題に影響するのはなぜですか?
HTML:
<ul id="menu">
<li class="side"></li>
<li class="spacer first"></li>
<li><a href="">Test</a></li>
<li class="spacer"></li>
<li><a href="">Test</a></li>
<li class="spacer"></li>
<li><a href="">Test</a></li>
<li class="spacer"></li>
<li><a href="">Test</a></li>
<li class="spacer last"></li>
<li class="side last"></li>
</ul>
CSS:http://jsfiddle.net/GfSLC/14/ありがとう:あなたはここで動作を確認することができます
body { font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
}
ul#menu {
width:1110px;
}
ul#menu li {
display: inline;
}
ul#menu li.side
{
padding-right:100px;
}
ul#menu li.spacer.first
{
padding-right:85px;
}
ul#menu li.spacer.last
{
padding-right:85px;
}
ul#menu li.side.last
{
background-position:0px 0px;
padding-right:100px;
}
ul#menu li.spacer
{
padding-right:84px;
}
ul#menu li a
{ margin-right:-4px;
text-align:center;
width:122px;
font-size:x-large;
display:inline-block;
font-weight: bold;
text-decoration: none;
padding-top:13.5px;
padding-bottom:14.5px;
background-color:blue;
color: #000;
}
!もう情報を提供する必要があるかどうかを教えてください。
@Knu ...何ですか? "コメントリマインダー"? –