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: