为什么我的字体家族影响包装问题？

我有一个固定宽度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

为什么我的字体家族影响包装问题？

回答

相关问题