Question

我有一个包含几个字段集的表单。一个字段集具有由用户设置的时间偏好表。用户可以添加和删除时间首选项。当他们添加一行时，使用jQuery append()将表行动态插入到DOM中。

问题在于，在IE6和IE7中，当添加新表行时，页面上任何相对定位的元素都不会“崩溃”。此外，当删除表行时，它们也不会移动。他们只是陷入困境。

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

以下是应用于fieldsets的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：relative，并解决了问题。这可能是一个很好的替代解决方案，尤其是在包含大量可能导致元素移动的操作的页面上。

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

2 个答案: