2009-10-20 4 views
1

Voici mon balisage (live repro):Comment puis-je empêcher les divs de se redimensionner dans IE6?

<body> 
    <div style="text-align:center">header <input class='datepicker'/></div> 
    <table><tr><td>really wide table.....................</td></tr></table> 
</body> 

Lorsque le sélecteur de date est activée, la largeur de div d'en-tête change de la largeur de l'écran à la largeur de la table (plus grande). Cela provoque le déplacement du contenu centré de l'en-tête vers son nouveau centre ... ce qui est très ennuyeux.

Cela se produit dans IE6 mais pas dans FF3.5, IE8 ou IE8-compat-mode.

Quelle est la meilleure façon de fixer la largeur de la div en-tête à la largeur de la fenêtre (pas le contenu)?

Note: il y a probablement un exemple beaucoup plus simple que le datepicker - probablement quelque chose qui n'implique pas jQuery - c'est juste le déclencheur qui m'a frappé ainsi je l'affiche de cette façon. Voici an example qui ajoute un élément dom sans déclencher ce problème.

Répondre

1

Aucune combinaison simple de conteneurs ou de directives CSS ne semblait fonctionner pour moi. Voici ce que je fini par faire (je l'ai déjà jquery dans ma pile):

// set the header div's width in px on page load/window resize 
$(window).bind('load resize', function() { 
    $('#header').css('width', $(window).width() - 20 /* scrollbars */); 
}); 

Cette solution conduit bande sûre: il traite les symptômes plus que la cause racine ... mais il semble fonctionner assez bien que je puisse passer à de meilleures choses.

Je suis confiant qu'une solution pure-CSS existe à ce problème ... si vous l'avez, s'il vous plaît le signaler!

Questions connexes