Annoying IE9 CSS Hover and Overflow Issue

Case

I have a <table/> which is surrounded by a <div/> which has the attribute style="overflow:auto". The table has a hover attribute to highlight table rows on mouseover. Additionally, There are some checkboxes arranged in a table below it, but it could be another element. When you mouseover the table in the div, the checkboxes start moving the the bottom of the page.

Resolution

I found the following bug posted on the jQuery bug tracker: Problem with .hover() and IE9 that describes the behavior. Brian Richards, who is linked to in the bug, has a simple bug elegant fix that worked for me.In his blog post, IE9 Hover Bug Workaround, he simply added min-height:0% to the style.

I hope that the solution works for others who may encounter the problem. I also found another blog to put on my blog roll to keep an eye on. Thanks for blogging Richard.