Firefox，IE9与Chrome，Opera中的横向CSS Nav Padding差异

Question

我在CSS菜单上遇到了一个奇怪的问题。两者都适用的填充有所不同 Firefox＆amp; IE9 vs Chrome＆amp; Opera浏览器。在菜单末尾的最后一个菜单项之后留下的空间在两个浏览器上都是不同的。 请参阅zip文件中的chrome.jpg和firefox.jpg以了解我的意思。 我还附上了源html文件。

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

铬：

火狐：

Answer 1

这不是填充，但可能在不同浏览器中呈现字体的方式有所不同。是的，除非你把菜单项固定宽度，否则几乎不可能解决。 ：）

firefox版本看起来更大胆（看到了吗？！）......这些是脑力激荡的问题，处理起来并不好玩，但很容易解释。

Answer 2

IE9 / Firefox使用与Chrome / Opera不同的渲染文字技术。

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/

如果没有在每个菜单项上设置固定宽度（请勿），则无法修复它。但是，您不需要 来修复它：浏览器之间的几个像素差异并不重要。请注意，您网站的用户只能使用一个浏览器查看它。