0

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

所以这是第一个链接。

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

如果你看它更小或取消它的最大高度，它会破裂，并且不会让任何低于它的东西漂浮在那里。请注意，第一个 li img 标签有一个 jpg 作为背景。

现在进行这个奇怪的修复：S

我将 JPG 更改为 PNG，这就是我所做的一切......它工作了 http://madaxedesign.co.uk/dev/myWork.html

我不知道为什么会这样做..并且希望有人解释为什么更改格式会对我做这样的事情，这无关紧要。

谢谢

4

1 回答 1

2

由于数学上的微小差异，您遇到了一个有趣的问题。

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

但为什么？

如果你看一下你的 jpg，尺寸是 250x261，而对于 png，250x260，高 1px，这可能是数学的起源。您所有的其他背景图像都是 250x260。数学上的差异源于使用auto缩放图像，有点棘手。

如何解决？

尝试删除多余的像素。

于 2013-04-09T22:39:10.267 回答