FF4中的填充錯誤

由於更新到FF4，我的一個網站上似乎有一些錯誤的FF4解釋CSS的解釋。或者更確切地說：如果覆蓋FF和Chrome的屏幕截圖，則FF中的文本比Chrome中的文本低2-3px。所以它不正確的垂直對齊。如果我在.nav中減少填充頂部以便在FF中調整它，它不在Chrome中間。FF4中的填充錯誤

在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事件，使用margin來對齊而不是填充）。

謝謝。

info：它不依賴於任何其他佈局。測試它也在一個乾淨的頁面上。

來源

2011-03-23 ptmr.io

您可以鏈接到實時頁面嗎？ – kmiyashiro 2011-03-23 18:47:43

在FF4中出現了一些浮點問題..嘗試添加或更改浮點數 – Abudayah 2011-03-23 19:27:04

有幾個問題。最簡單的解決辦法是設置你的.nav規則的行高，像這樣：

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

每一個瀏覽器都有不同的默認襯線和無襯線字體。每個瀏覽器甚至有不同的字體渲染算法。如果您要爲要控制高度的元素的框模型使用文本，請始終明確設置元素的行高和高度。

來源

2011-03-23 18:54:45 kmiyashiro

**完美**謝謝！ – 2011-03-24 10:15:19

FF4中的填充錯誤

回答

相關問題