当DOM被更新时，相对定位的元素不移动（IE6和IE7） [英] Elements positioned relatively don't move when the DOM is updated (IE6 and IE7)

问题描述

我有一个窗体，有几个fieldsets。一个字段集具有由用户设置的时间偏好表。用户可以添加和删除时间首选项。当它们添加一行时，使用jQuery append（）将表行动态插入到DOM中。

I have a form with a few fieldsets. One fieldset has a table of time preferences set by the user. The user can add and delete time preferences. When they add a row, a table row is dynamically inserted into the DOM using a jQuery append().

问题是在IE6和IE7中，当添加新表行时，页面上任何相对定位的元素不会碰撞。此外，当表行被删除时，它们也不移动。

The issue is that in IE6 and IE7 any relatively positioned elements on the page do not "bump" down when the new table rows are added. Furthermore, they don't move when table rows are deleted either. They are kind of just stuck in their spots.

这是相对较小的，但是每个字段集都是相对定位的，以避免字段集的IE背景溢出问题。因此，在向表中添加两行或更多行后，表单就非常糟糕。

This would be relatively minor, but each fieldset is relatively positioned in order to avoid the IE background overflow issue with fieldsets. Therefore, the form likes quite bad after one adds two or more rows to the table.

这是应用于fieldsets的CSS：

Here is the CSS being applied to the fieldsets:

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 从样式表中删除，动态添加的行会正常工作，内容会根据需要向下移动。

When the position: relative is removed from the stylesheet, the dynamically added rows work perfectly and the content moves down as appropriate.

任何帮助都非常感谢。

推荐答案

Yeah IE是一个真正的痛苦，当谈到这一点。我发现我实际上不得不强制它重绘DOM元素，以便让它移动。我如何做到这一点是非常快速地隐藏和显示父对象在你的情况下，它听起来像你的行的父。这不是最优雅的解决方案，但它做的工作。

Yeah IE is a real pain when it comes to this. I found that I actually had to force it to redraw the DOM element inorder to get it to move. How I did this was to very quickly hide and show the parent object in your case it sounds like the parent to your row. This is not the most elegant solution, but it does the job.

在我的情况下，我使用jQuery来完成工作。

In my case I used jQuery to get the job done.

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");
    }
};

这篇关于当DOM被更新时，相对定位的元素不移动（IE6和IE7）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！