爲什麼我的字體家族影響包裝問題？

我有一個固定寬度ul與內聯li s。裏面的一些li s我有a與鏈接。我基本上製作標籤。我已將所有li設置爲固定寬度，直接與ul的寬度相同。這在Chrome中正常工作。在Opera和Firefox中，它是一個像素關閉。但在IE中，li包裝到一個新的行。我儘可能地剝離了我的HTML和CSS，並將其放入JSFiddle中。我發現，由於一些stinkin的原因，font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;導致這種情況發生。當我刪除它時，它是固定的。我想知道爲什麼？爲什麼我的字體家族影響包裝問題？

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：

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; 


    }

您可以在這裏看到的行爲：http://jsfiddle.net/GfSLC/14/謝謝！讓我知道如果我需要提供更多的信息。

來源

2011-05-22 Thomas Shields

@Knu ...什麼？「評論提醒」？ – 2011-05-22 05:04:58

我認爲瀏覽器渲染頁面的方式略有不同。不同的字體會影響width:auto; height:auto的元素的寬度和高度。例如，如果刪除font-family，則<a>的高度會縮小3px。不同的字體字形將消耗不同的空間量。

在這種情況下，問題在於一個瀏覽器已將所有<li>的寬度計算爲大於包含元素的寬度，並且溢出到下一行。爲了解決這個問題，您可以：

應用FONT-FAMILY到<li>而不是<body>
通過1-2px

此外，IE8在怪異模式來降低隔離元件的寬度按預期渲染頁面;在標準模式下，它會溢出容器。

來源

2011-05-22 06:52:58 andyb

謝謝！我想我的問題是試圖使用填充作爲寬度的替代 - 字體將添加到該寬度，字體不會影響它。 – 2011-05-22 12:25:11

爲什麼我的字體家族影響包裝問題？

回答

相關問題