网站在 Mozilla Firefox 和 chrome 中看起来不同答案

【问题标题】：website looks different in mozilla firefox and chrome网站在 Mozilla Firefox 和 chrome 中看起来不同
【发布时间】：2014-10-26 19:32:28
【问题描述】：

我一直在为一位朋友编写一个网站，与他发给我的截图密切相关。我正在对其进行编码，同时在 chrome 中查看，但后来我意识到 section 的位置在 mozilla firefox 中被弄乱了。

如何修复它，让它在两个浏览器中看起来都很好？

这里是它的链接，所以我不必粘贴所有代码：http://pgw10eu.url.ph/more/des/index.html

【问题讨论】：

【解决方案1】：

问题是活动li 的高度。在nav li.active 中检查padding-bottom。您将其设置为 10 像素，但如果您将其设置为 8 像素，则可以。

如果您的浏览器窗口在 FF 中很窄，那么您会在 nav 栏和 section 之间看到“第 2 页”-“第 6 页”之间的小间隙。 “第 1 页”实际上触及了该部分。

如果浏览器窗口很宽，则section 可以向上浮动以触摸nav，但活动li 的高度会将其推到右侧。

【讨论】：

【解决方案2】：

好的，所以我发现，chrome 和 firefox 有不同的填充大小（即使数字相同）我只需要添加 firefox 特定的填充。

【讨论】：

【解决方案3】：

您可以使用 Chrome 和 Firefox 的内置开发者工具来修复它。

只需检查 HTML 元素并比较它们的大小（边距等）。这样你应该就能找到区别了。

您可以使用开发人员工具即时更改 CSS 属性并稍后更正您的源代码。

【讨论】：