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

Question

3

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

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

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

在Internet Explorer（11）中，同样的填充值显示为太长，导致导航菜单换到第二行。

在Firefox中，将左填充值从13.95更改为14.5 px可以解决导航问题。

在IE中，将左填充值从13.95更改为12.6 px可以解决导航问题。

- Dave Mackey

1

我认为这与文本渲染有关，而不是内边距。特别是Firefox会呈现出稍微更重一些的效果，这可能会导致元素宽度的微小偏移。 - Paul Redmond

如果你还没有尝试过，可以在这里找到reset.css：http://meyerweb.com/eric/tools/css/reset/。对于不同的Web浏览器，你并没有太多可以做的。另一种选择是使用相对大小。 - ZeroBased_IX

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joel Trauger · Accepted Answer

我认为这与文本呈现有关，而不是填充。特别是Firefox会呈现出略微更重的字体，这可能会导致元素宽度的小偏移。- Paul Redmond 58分钟前

这个问题已经存在很长时间了，非常令人烦恼。最好的方法是，不要将宽度硬编码到样式中，而是以对页面宽度和字体呈现重量响应的方式进行编码。

一个更好的技巧是，取每个按钮的背景，并将其拉伸到整个菜单并设置其宽度。然后，您可以切割和分隔每个菜单项的<ul>，让最后一项是模糊的，这样它就可以填满到末尾。

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