网站在mozilla firefox和chrome中看起来有所不同

Question

我一直在为一个朋友编码一个网站，与他给我发送的屏幕截图非常接近。 当我在chrome中查看时，我正在对其进行编码，但是后来我意识到该section的位置在mozilla firefox中被弄乱了。

我该如何修复它，使其在两种浏览器中都可以正常显示？

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

Answer 1

好的，所以我发现chrome和firefox具有不同的填充尺寸（即使数量相同），我只需要添加特定于firefox的填充即可。

Answer 2

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

如果您的浏览器窗口的FF窄，则nav栏和section之间的“第2页”-“第6页”之间会出现小的间隙。 实际上，“页面1”触及该部分。

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

Answer 3

您可以使用Chrome和Firefox的内置开发人员工具对其进行修复。

只需检查HTML元素并比较其大小（边距等）。 您应该能够以这种方式找到差异。

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