Comment IE peut-il repositionner correctement un élément après le redimensionnement vertical d'un frère?

Question

je le balisage suivant:

<nav id='tab_links'> 
    <a href='#view1'>One</a> 
    <a href='#view2'>Two</a> 
</nav> 
<div id='container'> 
    <div id='view1'>Short Content</div> 
    <div id='view2'>Much longer content</div> 
</div> 
<footer> 
<input type='submit' /> 
</footer> 

et les styles suivants:

#view2 { display: none; } 
#footer { display: block; clear: both; text-align: right; } 
#footer * { display: inline-block; text-align: center; } 

J'utilise le jQuery ci-dessous pour échanger les vues:

$('#tab_links a').click(function() { 
    var tabToShow = $($(this).attr('href')); 
    var otherTabs = tabToShow.siblings(); 
    tabToShow.show(); 
    otherTabs.hide(); 
}); 

Quand j'intervertir la view1 contenu pour le contenu view2, le pied de page reste où il était, planant au-dessus du milieu du nouveau contenu. Si je passe la souris au-dessus du contenu du pied de page, il saute en place. Si je ramène ensuite le contenu à view1, le pied de page reste là où il était pour view2, ce qui est loin en dessous de la fin du container.

Quels styles puis-je appliquer pour que IE positionne correctement le pied de page? J'ai essayé tous les éléments suivants, dans diverses combinaisons:

• appliquent clearfix à #container
• appliquer clearfix-#footer
• appliquer height: auto à #container
• appliquer height: 30px-#footer input
• appliquer à widgth: 100px#footer input

Answer 1

Parfois, un simple "débordement: auto; largeur:. legende » appliquée sur la #container va résoudre le problème

Voir ceci: http://www.atbskate.com/trusktr/2010/03/05/clearing-floats-with-the-overflowauto-css-property/

Ou ceci: http://www.quirksmode.org/css/clearing.html

Était-ce la solution à votre problème

Answer 2

Une solution est? pour le traiter comme un problème jQuery au lieu d'un problème CSS

D'abord, définissez une fonction forceRedraw sur les éléments jQuery qui définit simplement la classe de l'élément à sa classe existante:

jQuery.fn.extend({ 
    forceRedraw: function() { 
    jQuery(this).each(function() { 
     this.className = this.className; 
    }); 
    } 
}); 

Puis, quand vous échangez les vues:

$('#view1').hide(); 
$('#view2').show(); 
$('#footer').forceRedraw(); 

(Cette solution a été proposé sur le jQuery forums)