Les éléments positionnés relativement ne bougent pas lorsque le DOM est mis à jour (IE6 et IE7)

Question

J'ai un formulaire avec quelques champs. Un fieldset possède une table de préférences de temps définie par l'utilisateur. L'utilisateur peut ajouter et supprimer des préférences de temps. Lorsqu'ils ajoutent une ligne, une ligne de table est insérée dynamiquement dans le DOM en utilisant un jQuery append().

Le problème est que dans IE6 et IE7 tous les éléments relativement positionnés sur la page ne "bump" vers le bas lorsque les nouvelles lignes de la table sont ajoutées. De plus, ils ne bougent pas lorsque les lignes de tables sont supprimées. Ils sont en quelque sorte juste coincés dans leurs taches.

Cela serait relativement mineur, mais chaque ensemble de champs est relativement positionné afin d'éviter le problème de débordement d'arrière-plan IE avec les jeux de champs. Par conséquent, la forme aime assez mal après avoir ajouté deux ou plusieurs lignes à la table.

Voici le CSS étant appliqué aux 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; 
} 

Lorsque le position: relative est retiré de la feuille de style, les lignes ajoutées dynamiquement fonctionnent parfaitement et le contenu se déplace vers le bas, selon le cas.

Toute aide est très appréciée.

Answer 1

Ouais IE est une vraie douleur quand il s'agit de cela. J'ai trouvé que je devais réellement le forcer à redessiner l'élément DOM pour le faire bouger. Comment je l'ai fait était de cacher très rapidement et montrer l'objet parent dans votre cas, il semble que le parent de votre rangée. Ce n'est pas la solution la plus élégante, mais elle fait le travail.

Dans mon cas, j'ai utilisé jQuery pour faire le travail.

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

J'ai récemment rencontré le même problème. J'ai fini par trouver que cela n'arrivait que lorsque mon élément relativement positionné était contenu dans un autre élément relativement positionné.

Bien qu'il ne m'ait pas été possible de changer le style de positionnement de l'élément lui-même, j'ai pu supprimer la position: relative de l'élément contenant, et cela a résolu le problème. Cela pourrait être une bonne solution alternative, surtout sur une page avec beaucoup d'actions qui pourraient faire bouger les éléments.