更新 DOM 时相对定位的元素不会移动（IE6 和 IE7）

我有一个带有几个字段集的表单。一个字段集具有用户设置的时间偏好表。用户可以添加和删除时间偏好。当他们添加一行时，表行会使用 jQuery 动态插入到 DOM 中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从样式表中删除后，动态添加的行可以完美地工作，并且内容可以适当地向下移动。

任何帮助深表感谢。

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