Html 为什么当我更改图像格式时会把我的网站搞砸

好吧，这是个奇怪的问题。我已经修好了，但我想知道它为什么不起作用。您将不得不使屏幕更小，因为我通过在li标签上放置255px的最大高度来修复它。如果您愿意，可以在全屏显示时将其取下，并将显示相同的问题

这里是第一个链接

如果你看得更小，或者取下最大高度，它就会断裂，并且不会让它下面的任何东西漂浮在那里。请注意，第一个LIIMG标记的背景是jpg

现在来看这个奇怪的修正：S

我把JPG改成了PNG，这就是我所做的。。它成功了

我不明白它为什么会这样做。。我希望有人能解释为什么改变一种格式会有这样的效果，因为对我来说这并不重要

---

谢谢

你有一个有趣的问题，这是由于数学上的一个小差异造成的

如果您在Firefox中查看您的网站并检查

元素，在公文包页面中，高度计算为214.933px，在myWork页面中，该值计算为210.663px。所有其他

元素在两个页面上的计算高度均为210.633。因此，由于浮动的工作方式，稍高的第一个浮动将强制下一个浮动从其右边缘开始，而不是从父容器的边缘开始

但是为什么呢？

如果你看一下你的jpg，尺寸是250x261，对于png，250x260，高出1px，这可能是数学的起源。所有其他背景图像均为250x260。使用

auto

缩放图像会产生数学上的差异，这有点棘手

如何修复它？

---

请尝试删除多余的像素。

+1获得一个很好的描述性答案。非常感谢，这是一个很好的答案！祝你一切顺利！谢谢，这似乎就是为什么，我没有想到看bg图像的高度，因为它是100%宽度和高度设置为自动。所以我觉得它和其他LI标签一样合适。如果我想要一个大于250x260的图像，有什么想法吗？如何使它适合任何尺寸？我猜你会使用“最大高度”和“最大宽度”，但不会考虑它的响应性。非常感谢您的时间。非常欢迎，您使用了相当先进的CSS概念，所以解决这个问题很有趣。您关于250x260图像的问题需要一些思考，请记住。如果我有什么想法，我会更新我的帖子并给你打电话。祝你一切顺利！