網站在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屬性，並在以后更正源代碼。