2011-05-22 17 views
1

固定幅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; 


    } 

!もう情報を提供する必要があるかどうかを教えてください。

+0

@Knu ...何ですか? "コメントリマインダー"? –

答えて

1

私は、単にブラウザがページをわずかに異なる方法でレンダリングすると考えています。異なるフォントは、width:auto; height:autoの要素の幅と高さに影響します。たとえば、<a>の高さは、font-familyを削除すると3px縮小します。異なるフォントグリフは、異なる量のスペースを消費します。この場合

、問題は、一つのブラウザが含まれている要素の幅より大きくなるように、すべての<li>の幅を算出しており、それは次の行に波及されることです。

  • がQuirksモードでは、また1-2px

でIE8をスペーサ要素の幅を減らす代わりに<body>

  • <li>にフォントファミリを適用します。あなたはどちらかできます。これを修正するにはページを期待どおりにレンダリングします。スタンダードモードでは、容器をオーバースピルします。

  • +0

    ありがとう!私の問題は、幅の代用としてパディングを使用しようとしていたと思います。フォントはそれに追加されます。幅はフォントに影響しません。 –