html - IE9 Bug ? Mysteriously growing DIV -


i have following little sample:

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css">     table.sample { width: 600px; table-layout: fixed; }     table.sample col { width: 60px; }     table.sample td { height: 20px; line-height: 20px; padding: 0px; }     table.sample input { width: 55px; height: 17px; padding: 0px; margin: 0px; border-width: 1px; } </style> </head> <body>     <div id="scrolldiv" style="width: 400px; overflow: auto; background-color: #cccccc;">         <table class="sample">             <colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /></colgroup>             <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>             <tr><td><input type="text" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>             <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>         </table>     </div> </body> </html> 

this works ok on ie8, ie10, chrome, firefox, safari, ... bugs on ie9.

when start typing text box, div grows in height. scrollbar not move, div grows below scrollbar.

i can't define height of div in css number of lines variable , i'm not sure scrollbar present (as number of columns variable in real example).

i can solve problem following javascript code, wondering doing wrong provoke error.

var div = document.getelementbyid('scrolldiv'); div.style.height = div.offsetheight  + "px"; 

thanks

this appears bug in ie9 how handles overflow-x:auto. adding display:inline-block css div worked great me. source:

internet explorer 9's magically expanding div


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -