Menu
I'm seeing strange behavior with a scrolling DIV in IE9. I'm using the max-height CSS tag on the DIV. The DIV grows taller when I enter text into input boxes contained within the DIV. This only happens when the input boxes extend beyond the right edge of the page.
To recreate, shrink the browser down so the input boxes extend beyond the right edge of the screen screen and the horizontal scroll bars appear on the DIV. Then enter text into any one of the input boxes. The DIV grows taller with every keystroke.
Have I screwed up my CSS or HTML, or is this a bug with IE9?
Thanks.
<head>
<style type="text/css">
.ScrollTest
{
max-height: 200px;
overflow:auto;
}
</style>
</head>
<body>
<div class="ScrollTest">
<table class="ScrollTest">
<tr>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
</tr>
</table>
</div>
<div>Second DIV</div>
</body>
</html>
509
It seems to be a bug, there is no reason for this behavior. I could fix the issue with replacing overflow:auto with overflow-x:scroll.
Take a look: http://jsbin.com/ifirur/4
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
