爲什麼當我改變圖像格式時，它會弄亂我的網站

Question

好吧，這是一個奇怪的。我已經修復了它，但我想明白爲什麼它不起作用。您必須縮小屏幕，因爲我通過在li標籤上放置255px的最大高度來固定屏幕，如果您希望在全屏時顯示相同的問題，則可以將其取消。

所以這裏是第一個鏈接。

http://madaxedesign.co.uk/dev/portfolio.html

如果你看它小或者脫下它打破了最大高度，並在其下方漂浮有沒有讓任何事情。注意第一個li img標籤有一個用於背景的jpg。

現在對於這個奇怪的修復：■

我改變了JPG至PNG，這就是我所做的..和它的工作 http://madaxedesign.co.uk/dev/myWork.html

我沒有在它爲什麼會任何理解這樣做，並會喜歡有人解釋爲什麼改變格式會做這樣的事情對我來說應該不重要。

感謝

Answer 1

你必須從數學中一個小的差別而產生一個有趣的問題。

如果您在Firefox中查看您的網站並檢查<li class="corners hide">元素，則在投資組合頁面中，高度計算爲214.933px，在myWork頁面中，此值計算爲210.663px。所有其他<li class="corners">元素在兩個頁面上的高度均爲210.633。因此，由於浮動的工作方式，稍高的第一個浮動將強制下一個浮動開始在其右邊緣而不是父容器的邊緣。

但是爲什麼？

如果你看看你的jpg，尺寸是250x261，而png，250x260,1px的高度更高，這可能是數學的起源。所有其他背景圖片都是250x260。使用auto來縮放圖像會產生數學差異，這有點棘手。

如何解決呢？

嘗試刪除多餘的像素。