JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
If you mouse-over the row and mouse-out the grid and test many times, the grid's height will increase in IE9 only
<div style="width:100%;height:100%;">
            <div class="grid">
                <div class="grid-body">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
                        <tbody>
                            <tr height="50px">
                                <td style="width:304px;" class="item">
                                    <div>
                                        Please mouse-over me and out
                                    </div>
                                </td>
                                <td class="item">
                                    <div>
                                        Please mouse-over me and out
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
</div>
</body>
</html>

CSS

html, body {height:100%}
 body {
     margin: 0; padding: 0 5px;
 }
 div.grid {
     background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; zoom: 1;
 }
 div.grid-body {
     background: red; border: 0; overflow: auto; width: 100%; position: relative;
 }
 tr.item-over {
     color: #6eadff; }

JavaScript

$(document).ready(function (){
     $('.item').mouseover(function () {
         $(this).parent().addClass("item-over");
     }).mouseout(function() {
         $(this).parent().removeClass("item-over");
     });
     }
 );