为什么当我更改图像格式时,它会弄乱我的网站

时间:2013-04-09 21:20:02

标签: html css media-queries formats

好的,这是一个奇怪的。我修好了但是我想明白为什么它不起作用。您必须将屏幕缩小,因为我通过在li标签上放置最大高度255px来修复它,如果您希望全屏显示同样的问题,可以将其关闭。

所以这是第一个链接。

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

如果你看它较小或取下最大高度它会断裂,并且不会让它下面的任何东西漂浮在那里。注意第一个li img标签有背景的jpg。

现在对于这个奇怪的修复:S

我将JPG改为PNG,这就是我所做的一切......而且它有效 http://madaxedesign.co.uk/dev/myWork.html

我对它为什么会这样做没有任何理解......并希望有人解释为什么改变一种格式会对我这样做,这应该不重要。

由于

1 个答案:

答案 0 :(得分:2)

由于数学上的差异很小,你会遇到一个有趣的问题。

如果您在Firefox中查看您的网站并检查<li class="corners hide">元素,则在投资组合页面中,高度计算为214.933px,而在myWork页面中,此值计算为210.663px。所有其他<li class="corners">元素在两个页面上的评估高度均为210.633。因此,由于浮点数如何工作,稍高的第一个浮点会强制下一个浮点数从其右边缘而不是父容器的边缘开始。

但为什么?

如果你看你的jpg,尺寸是250x261,对于png,250x260,身高1px更高,这可能是数学的起源。您所有其他背景图片均为250x260。使用auto来缩放图像会产生数学差异,这有点棘手。

如何解决?

尝试删除额外的像素。