Question

我有一个内联ul的固定宽度li。在一些li s里面，我有a个链接。我基本上是在制作标签。我已将所有li的固定宽度设置为ul的宽度。这在Chrome中运行良好。在Opera和Firefox中它是一个像素关闭。但是在IE中，li包裹在一个新行上。我尽可能地删除了我的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/谢谢！如果我需要提供更多信息，请告诉我。

Answer 1

我认为浏览器呈现页面的方式略有不同。不同的字体会影响width:auto; height:auto元素的宽度和高度。例如，如果您移除<a>，font-family的高度会缩小3个像素。不同的字体字形将消耗不同的空间量。

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

将font-family应用于<li>而不是<body>
将间隔元件的宽度减小1-2px

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

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

1 个答案: