html - 为什么填充在不同的浏览器中显示不同？

Question

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

网址是:http://www.liquidchurch.com/satur8te-home/

在 Chrome (45) 中，padding 22px 15px 21px 13.95px 显示正确。

但在 Firefox (40) 中，同样的填充显示为太短。

在 Internet Explorer (11) 中，相同的填充显示为太长，导致导航中断到第二行。

在 Firefox 中，我可以通过将 padding left 值从 13.95 更改为 14.5 px 来修复导航

在 IE 中，我可以通过将 padding left 值从 13.95 更改为 12.6 px 来修复导航

Answer 1

I believe this is to do with text rendering and not padding. Firefox in particular renders a little heavier which can cause a small shift in the width of an element. – Paul Redmond 58 mins ago

这是完全正确的。查看differences between the various browsers in text rendering .

这已经存在很长时间了，非常烦人。与其将宽度硬编码到样式中，不如以响应页面宽度和呈现字体粗细的方式对其进行编码会更好。

更好的技巧是为每个按钮设置背景并将其拉伸(stretch)到整个菜单并设置其宽度。然后你可以切割和分割 <ul>对于每个菜单项，让最后一项不明确，以便它填充到最后。

这是一个 JSFiddle使用您网站中的 HTML 和 CSS 来演示这一点。