Элементы, расположенные относительно, не перемещаются при обновлении 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: относительный из содержащего элемента, и это решило проблему. Это может быть хорошим альтернативным решением, особенно на странице с множеством действий, которые могут вызвать перемещение элементов.