FF4 中的填充错误答案

【问题标题】：Padding Error in FF4FF4 中的填充错误
【发布时间】：2011-03-23 17:12:17
【问题描述】：

自从更新到 FF4 后，我的一个网站上似乎对 FF4 中的 css 有一些错误的解释。或者更准确地说：如果你覆盖 FF 和 Chrome 的屏幕截图，FF 中的文本比 Chrome 中的文本低 2-3px。所以它没有正确垂直对齐。如果我减少 .nav a 中的 padding-top 以在 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（这是一种解决方案：放弃 display:block 并应用 javascript onclick 事件，与边距而不是填充对齐）。

谢谢。

info：它不依赖于任何其他布局。也在干净的页面上进行了测试。

【问题讨论】：

你能链接到实时页面吗？
FF4中的float出现了一些问题..尝试添加或更改float

标签： css google-chrome padding firefox4

【解决方案1】：

有几个问题。最简单的解决方案是将 .nav 的 line-height 设置为规则，如下所示：

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

每个浏览器都有不同的默认衬线和无衬线字体。每个浏览器甚至都有不同的字体渲染算法。如果您依赖文本作为要控制其高度的元素的框模型，请始终明确设置元素的行高和高度。

【讨论】：