Question

自从更新到FF4后，我的一个网站上的FF4似乎有一些错误的css解释。或者更确切地说：如果您覆盖FF和Chrome的屏幕截图，则FF中的文本比Chrome中的文本低2-3px。所以它没有正确的垂直对齐。如果我减少.nav中的填充顶部以便在FF中进行调整，那么它就不在Chrome中间。

在FF 3.6中，一切都很好看。在IE中也可以。有任何想法吗？

此外，文字似乎在FF中比在Chrome中更广泛。你可以在这个img上看到它： http://i54.tinypic.com/2nsz6nn.jpg

第一个“开始”是在FF中，第二个在Chrome中（它应该如何）。下一个文字是FF和Chrome之间的叠加 - FF更广泛。

我网站上的导航栏是html：

<div id="nav_wrapper"> 
<div align="center" class="nav"><a href="/1" title="1">Link one</a></div>
<div class="nav_sep"></div>
<div align="center" class="nav"><a href="/2" title="2">Link two</a></div>
<div class="nav_sep"></div>
<div class="nav nav_last" style="width:249px;">
    <div class="right">
     <div class="left">
      <form action="/suche/" method="get" name="nav_searchForm">
       <input type="text" name="s" class="nav_searchInput" />
      </form>
     </div>
     <div class="btn nav_searchBtn"><div class="lf">&nbsp;</div><div class="ct">search</div><div class="rt">&nbsp;</div></div>
    </div>
</div>
<div style="clear:both"></div>

CSS：

/* navigation */
#nav_wrapper{width:100%;}
.nav{background-image:url(/img/nav.png);background-position:-10px 0px;background-repeat:no-repeat;color:#FFF;height:46px;float:left;font-size:16px;}
.nav a{display:block;color:#FFF;text-decoration:none;padding:15px 18px 10px 18px;}
.nav:hover{background-position:-10px -46px;}
.nav_sep{background-image:url(/img/nav.png);background-position:-444px top;height:46px;float:left;width:2px;}
.nav_last{height:34px;padding:12px 18px 0 18px;}
.nav_searchInput{background-image:url(/img/magnifier.png);background-repeat:no-repeat;background-position:left top;border:1px solid #D5D5D5;font-size:13px;margin:0 4px 0 0;padding:3px 2px 3px 26px;width:146px;}

任何想法如何解决？我不想让字段Javascript-Clickable（这将是一个解决方案：放弃显示：阻止并应用javascript onclick事件，与边距对齐而不是填充）。

谢谢。

info：它不依赖于任何其他布局。在一个干净的页面上测试它。

Answer 1

有一些问题。最简单的解决方案是将.nav的行高设置为规则，如下所示：

.nav a { line-height: 16px; }

每个浏览器都有不同的默认serif和sans-serif字体。每个浏览器甚至都有不同的字体渲染算法。如果您依赖于要控制高度的元素的盒子模型的文本，请始终明确设置元素的行高和高度。

FF4中的填充错误

1 个答案: