在类更改时，重叠元素在IE7中停止重叠

Question

在此页面上 http://zenchan.com/program/

当我从右上方翻转右侧框时，突然重叠（负边距消失）。发生的事情是添加了一个'悬停'类来移动背景精灵。

两个黄色框正在调试：如果悬停类提前放入则没有问题。因此从根本上说，CSS不是IE7的问题，但是添加类是。

任何想法是什么导致了这一点。我已经尝试将haslayout添加到各种元素但效果不大。

修改：我找到了解决方法。使用min-height：10px将hasLayout应用于周围元素。

Answer 1

查看标记，我认为你应该尝试添加一个div来包围div的每一行。您将元素浮动到左侧，并且下面没有任何带有clear的元素：both;价值集。例如：

<div id="row1" class="rowWrapper">
    <div id="program-dayoutdoor" class="program-wrapper">
        CONTENT
    </div>
    <div id="program-daycamp" class="program-wrapper">
        CONTENT
    </div>
</div>

然后在你的CSS中你将需要一个类似下面的样式

.rowWrapper {
    clear: both;
    height: WHATEVER_HEIGHT_YOU_NEED_PER_A_ROW
}

我不肯定这会解决你的问题，但这是一个开始。这样做的目的是确保每当事情发生变化时，行不会尝试将自己推到彼此之上。

另外，请确保两个类的大小相同，这显然会产生影响。

希望这有帮助，

大都市

修改

好的，我想我看到了你的问题。开始你的CSS有这些元素

body.page-slug-program div#program-daycamp {
    background-position:0 -141px;
    margin-left:-32px;
}

但是，转移边缘 - 左边会消失，背景位置= -390px -341px; 这意味着你的CSS必须在两者之间被改变。