Элементы, расположенные относительно, не перемещаются при обновлении DOM (IE6 и IE7)

Question

У меня есть форма с несколькими полями. Один набор полей имеет таблицу временных настроек, установленных пользователем. Пользователь может добавлять и удалять настройки времени. Когда они добавляют строку, строка таблицы динамически вставляется в DOM с помощью jQuery. append(),

Проблема в том, что в IE6 и IE7 любые относительно позиционированные элементы на странице не "ударяются" при добавлении новых строк таблицы. Кроме того, они не перемещаются при удалении строк таблицы. Они как бы просто застряли на своих местах.

Это было бы относительно незначительным, но каждый набор полей относительно позиционирован, чтобы избежать проблемы переполнения фона IE с наборами полей. Следовательно, форма очень сильно любит после добавления двух или более строк в таблицу.

Вот CSS, применяемый к наборам полей:

form.pancake fieldset {
    position: relative;
    margin-top: 1.5em;
    padding-top: 1.5em;
}
form.pancake fieldset legend {
    position: absolute;
    top: -0.5em;
    left: 0.5em;
}

Когда position: relative удаляется из таблицы стилей, динамически добавленные строки работают отлично, а содержимое перемещается соответствующим образом.

Буду признателен за любую оказанную помощь.

Answer 1

Да, IE это настоящая боль, когда дело доходит до этого. Я обнаружил, что на самом деле мне пришлось заставить его перерисовывать порядок элементов DOM, чтобы заставить его двигаться. Я сделал это, чтобы очень быстро спрятать и показать родительский объект в вашем случае, он звучит как родительский для вашей строки. Это не самое элегантное решение, но оно делает свою работу.

В моем случае я использовал jQuery для выполнения работы.

var forceRedraw = function(obj) {
    /// <summary>Forces a redraw of passed objects.</summary>
    /// <param name="obj" type="jQuery" optional="false">The object for force the redraw on.</param>

    obj = $(obj);

    // force IE to redraw the obj
    if (jQuery.browser.msie) {
        obj.css("display", "none");
        obj.css("display", "block");
    }
};

Answer 2

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

Хотя я не смог изменить стиль позиционирования самого элемента, я смог удалить position: относительный из содержащего элемента, и это решило проблему. Это может быть хорошим альтернативным решением, особенно на странице с множеством действий, которые могут вызвать перемещение элементов.