Question

我遇到的布局问题只出现在ie6或7（或兼容性视图中的ie8）。有问题的布局在这里：

这是一个非营利性支持乳腺癌的网站，因此它适合工作。

我遇到的问题是使用“捐赠”按钮旁边的小色带图像。它似乎有一个双边缘顶部。元素没有浮动，这是像这样的bug的典型原因。我尝试过应用display: inline，但这没有效果。任何想法，即6/7错误可能导致这种情况，以及如何解决？

元素的css是：

#main #upper #info .ribbon {
    margin-left: 1px;
    margin-top: 33px;
}

父元素：

#main #upper #info {
    width: 279px;
    position: absolute;
    right: 25px;
    top: 20px;
}

Answer 1

在我使用IE7进行实验时（我不再有一种简单的方法来测试IE6），只需摆脱margin-top: 33px看起来很好（或者至少将它减少到大约4px）。这可以通过定位这些浏览器来完成。

然而，似乎更多的跨浏览器解决方案似乎可以减少所有浏览器的余量，并向margin-bottom添加29px（约#main #upper #info .ticket？）。这似乎适用于Firefox和IE7。

我认为问题的根源在于，现代浏览器旁边的浮动类.button-large允许功能区与上面的故障单进行交互，但对于IE7，它似乎没有尝试提升功能区在票证下方，但已经将它对齐到左侧浮动元素的顶部，因此额外的边距将其从该点向下推。

Answer 2

似乎错误是img元素使用相邻浮动元素的顶部作为其顶部而不是上面img元素的底部，就像在所有其他浏览器中一样。

通过将相邻的浮动元素和img元素包装在clear: all div中来修复，这会强制在所有浏览器中使用相同的顶部。