Here's my markup (live repro):
<body>
<div style="text-align:center">header <input class='datepicker'/></div>
<table><tr><td>really wide table.....................</td></tr></table>
</body>
When the datepicker is activated, the header div's width changes from the width of the screen to the width of the table (larger). This causes the header's centered contents to shift to its new center...which is very annoying.
This occurs in IE6 but not in FF3.5, IE8, or IE8-compat-mode.
What's the best way to fix the width of the header div to the width of the window (not the content)?
Note: there is probably a much simpler example than the datepicker--probably something that doesn't involve jQuery--that's just the trigger that hit me so I'm posting it that way. Here's an example that adds a dom element without triggering this problem.
No simple combination of containers or CSS directives seemed to work for me. Here's what I ended up doing (I already have jquery in my stack):
// 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 */);
});
This is a duct-tape solution for sure: it treats the symptoms more than the root cause...but it seems to work well enough that I can move on to better things.
I'm confident a pure-css solution exists to this problem...if you have it, please post it!
来源：https://stackoverflow.com/questions/1595995/how-do-i-keep-divs-from-resizing-in-ie6