Firefox 4字體大小差異

我最近編寫了一個網站，並在所有瀏覽器上進行了正常測試，以確保跨瀏覽器的一致性。我已經測試過IE 7，IE 8，Chrome和Firefox 3.6。Firefox 4字體大小差異

但是，使用Firefox 4的用戶指出，CSS的某些部分已損壞。仔細研究之後，看起來Firefox 4的字體大小比任何其他瀏覽器的字體大小都要大，導致文本被壓低並破壞了一些佈局。

我已經設法解決了大部分問題，但最後一個突出問題是我有一個文本框向左漂移，跨度較小，文本內部有較小的文本，並且右側浮動。跨度有一個邊框，並與文本框的高度完全一致。由於Firefox 4的字體大小不同，文本框顯得比它應該更深，這意味着跨度不再排列在底部。

我查看了其他人是否遇到過使用Firefox 4顯示比其他瀏覽器文本更大的問題，但沒有運氣。有沒有其他人有同樣的問題？我不喜歡「解決方法」 - 我寧願找到一個體面的解決方案來解決這個問題 - 我一定在做一些奇怪的事情！

在此先感謝您的幫助！

編輯代碼人體所有默認字體大小：

body 
{ 
    font-size: 69.5%; 
    font-family: Tahoma, Verdana, Sans-Serif; 
    margin: 0; 
    padding: 0; 
    background: #4997C4 url(/Images/main_bg.gif) repeat-x left top; 
}

規範文本的問題領域的一個：

.content .banner p.content_text 
{ 
    margin: 5px 0 2px 12px; 
    font-size: 1.2em; 
    color: #38393C; 
    width: 374px; 
    line-height: 1.3em; 
}

來源

2011-06-14 Leah

向我們展示代碼 – Predator 2011-06-14 19:01:36

您正在使用相對字體大小（%，em），因此如果用戶在瀏覽器中指定了不同的默認字體大小，則頁面上的字體大小會有所不同。作爲一種解決方案，您可以使用絕對字體大小，如px。（與行高屬性相同的問題）

另一個問題可能是FF 4中的圖形硬件加速（我有其他一些問題），它對字體渲染有一些影響。

來源

2011-06-14 19:48:30 Floern

感謝您的回覆。我使用ems的原因是因爲它更易於訪問，因此可以增加字體大小。不過，我會研究FF4中的圖形硬件加速 - 謝謝。 – Leah 2011-06-14 20:04:44

我已經研究過它，我可以確認以下內容：「... Firefox 4的硬件加速功能...使字體不能很順利地導致褪色，別名，模糊，多孔，模糊，模糊和糟糕的字體在文字顯示中可能是不可讀的，而且顯得雜亂和醜陋。更糟糕的是，一些文本看起來更胖，更大，更大膽，更寬，更大，導致行寬變長，間距和佈局不合理，或者文本看起來被擠壓或擠壓在一起......「http：//www.coderetard .com/2011/03/10/fix-firefox-4-fade-blur-bold-bad-and-ugly-font-rendering /看起來沒有修正。 – Leah 2011-06-15 10:17:51

嘗試切換您的字體尺寸爲像素，從他們那裏看看是否能解決這個問題。如果是這樣，那麼這是一個用戶代理設置，除了使用像素值之外，您無法控制它。

如果沒有，我們需要更多信息。你在FF4上運行FF4的平臺是什麼？例如，由於Mac處理字體的方式，Mac上的任何內容都會顯得不同。

來源

2011-06-14 19:46:19 Shauna

感謝您的建議 - 我不想更改爲使用絕對字體大小，但在此情況下，我嘗試更改字體大小以查看您的建議是否有效。不幸的是，沒有區別。我改變了我在問題中發佈的代碼，使用12px而不是相對大小，但FF4仍然顯示稍大的文本，或者更多的間距，我不確定。我測試了運行Vista或Windows 7的Windows電腦上的所有瀏覽器。我還沒有在Mac上進行測試。再次感謝你的幫助。 – Leah 2011-06-15 08:09:29

Firefox 4字體大小差異

回答

相關問題