gpt4 book ai didi

html - 为什么我的字体系列会影响环绕问题?

转载 作者:行者123 更新时间:2023-11-28 19:00:26 28 4
gpt4 key购买 nike

我有一个带有内联 li 的固定宽度 ul。在一些 li 中,我有带有链接的 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/谢谢!如果我需要提供更多信息,请告诉我。

最佳答案

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

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

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

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

关于html - 为什么我的字体系列会影响环绕问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6086121/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com