Перекрывающиеся элементы перестают перекрываться в IE7 при изменении класса

Question

На этой странице http://zenchan.com/program/

Когда я переворачиваю правую рамку на 2-е сверху сверху, внезапно перекрывается (отрицательное поле исчезает) Происходит то, что класс 'hover' добавляется для смещения фонового спрайта.

Два желтых прямоугольника отлаживаются: если класс hover выставлен заранее, проблем нет. Таким образом, в основном CSS не является проблемой для IE7, но добавление класса является.

Любые идеи, что является причиной этого. Я пытался добавить haslayout к различным элементам, но с небольшим эффектом.

Редактировать : Я нашел решение для этого. Примените hasLayout к окружающему элементу, используя min-height: 10px.

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
}

Я не уверен, что это решит вашу проблему, но это только начало. Это будет гарантировать, что при каждом изменении строк строки не будут пытаться переместиться друг на друга.

Кроме того, убедитесь, что размеры в обоих классах одинаковы, что, очевидно, даст эффект.

Надеюсь, это поможет,

Метрополис

EDIT

Хорошо, я думаю, что вижу вашу проблему. Начиная с вашего CSS есть это для этих элементов

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

Но на полях слева налево отходит и background-position = -390px -341px; Это означает, что ваш CSS должен изменяться где-то посередине.