更新DOM时,相对定位的元素不会移动(IE6和IE7)

Question

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

问题是在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");
    }
};