为什么填充在不同的浏览器中出现不同？

Question

我的网站带有导航菜单，在Google Chrome浏览器中显示正常但在其他浏览器中显示的方式不同。为什么呢？

网址为：http://www.mediafire.com/download/aggg33i5ydvgrpg/ThesisSteganography%2850900483%29.rar

在Chrome（45）中，填充22px 15px 21px 13.95px正确显示。

http://www.liquidchurch.com/satur8te-home/

但是在Firefox（40）中，同样的填充显示为太短。

在Internet Explorer（11）中，相同的填充显示为太长，导致导航分成第二行。

在Firefox中，我可以通过将填充左侧值从13.95更改为14.5 px

来修复导航

在IE中，我可以通过将填充左侧值从13.95更改为12.6 px

来修复导航

Answer 1

  

我认为这与文本渲染有关，而不是填充。特别是Firefox渲染得更重一些，这会导致元素宽度的微小变化。 - Paul Redmond 58分钟前

这是完全正确的。请参阅differences between the various browsers in text rendering。

这已经存在了很长时间并且非常烦人。最好不要将宽度硬编码到样式中，而是以对页面宽度和渲染字体重量作出响应的方式对其进行编码。

更好的技巧是为每个按钮选择背景并将其拉伸到整个菜单并设置其宽度。然后你可以为每个菜单项剪切并除以<ul>，让最后一个项目不明确，以便填写到最后。

在这里JSFiddle使用您网站上的HTML和CSS来演示这一点。