Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Problem with max-height scrolling DIV in IE9

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>
like image 509
SkipHarris Avatar asked Sep 14 '11 20:09

SkipHarris


1 Answers

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

like image 99
Mohsen Avatar answered Nov 10 '22 03:11

Mohsen