为什么我的字体系列会影响包装问题？答案

【问题标题】：Why Is My Font-Family Affecting a Wrapping Issue?为什么我的字体系列会影响包装问题？
【发布时间】：2011-05-22 15:06:09
【问题描述】：

我有一个固定宽度的ul 和内联lis。在一些lis 里面我有a 和链接。我基本上是在制作标签。我已经将所有lis 设置为固定宽度，直接达到ul 的宽度。这在 Chrome 中运行良好。在 Opera 和 Firefox 中，它是一个像素。但是在 IE 中，lis 环绕到一个新行上。我尽可能地剥离了我的 HTML 和 CSS 并将其放入 JSFiddle 中。我发现出于某种臭名昭著的原因，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/ 谢谢！让我知道我是否需要提供更多信息。

【问题讨论】：

@Knu... 什么？ “评论提醒”？

标签： html css internet-explorer font-face

【解决方案1】：

我认为这只是浏览器呈现页面的方式略有不同。不同的字体会影响带有width:auto; height:auto 的元素的宽度和高度。例如，如果您删除 font-family，您的 <a> 的高度会缩小 3px。不同的字体字形会占用不同的空间。

在这种情况下，问题在于一个浏览器计算出所有<li> 的宽度大于包含元素的宽度，并且溢出到下一行。要解决此问题，您可以：

将字体系列应用于<li> 而不是<body>
将间隔元素的宽度减小 1-2px

此外，IE8 在 quirks 模式下会按预期呈现页面；在标准模式下，它会溢出容器。

【讨论】：

谢谢！我想我的问题是尝试使用填充来代替宽度 - 字体会添加到它上面，而宽度不会影响它。