Comment puis-je garder divs de redimensionnement dans IE6?

StackOverflow https://stackoverflow.com/questions/1595995

Question

Voici mon balisage ( repro en direct ): 

<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 la div d'en-tête des changements par rapport à la largeur de l'écran à la largeur de la table (plus grande). Cela provoque le déplacement vers son nouveau centre de contenu centré sur l'en-tête ... 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 l'en-tête div à la largeur de la fenêtre (non le contenu)?

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

Était-ce utile?

La solution

Aucune combinaison simple des conteneurs ou des directives CSS 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 */);
});

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

.

Je suis confiant une solution pure css existe à ce problème ... si vous l'avez, s'il vous plaît poster!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top