水平的CSS瀏覽器填充差異在Firefox，IE9與Chrome，Opera

Question

我有一個奇怪的CSS菜單問題。 Chrome瀏覽器 Firefox & IE9與Chrome &適用於Opera瀏覽器。在菜單末尾的最後一個菜單項之後留下的空間在兩個瀏覽器上都不同。 請參閱zip文件中的chrome.jpg和firefox.jpg以瞭解我的意思。 我也附上了源html文件。

這裏是zip文件 - https://www.sugarsync.com/pf/D6612639_7394829_952554

鉻：

火狐：

Answer 1

這不是填充，但可能是字體在不同瀏覽器中呈現方式的差異。是的，這是幾乎不可能解決，除非你讓菜單項固定寬度。 :)

firefox版本看起來更大膽（看到它？！）...這些都是腦力激盪的問題，沒有樂趣處理，但很容易解釋。

Answer 2

IE9/Firefox中使用不同的技術來呈現文本除Chrome /歌劇做。

IE9/Firefox使用DirectWrite，因此文本出現的時間稍微更寬一些，在所有菜單項上增加了幾個像素差異。

在這裏閱讀更多：http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

而且閱讀，特別是「提示和間距的差異」部分：http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

短於每個菜單項設置固定寬度的（不），你可以不解決它。但是，您不需要需要來修復它：瀏覽器之間的幾個像素差異並不重要。請記住，您網站的用戶只能使用一個瀏覽器來查看它。