IE9 Hover Bug Workaround

I came across an annoying little rendering bug in IE9. There are a few bugs submitted in Connect and here is a link (login required) to the one I submitted this workaround.

The problem occurs when you have a container that has a fixed width set, an overflow set to auto, content long enough to trigger the horizontal scroll, and a hover style set on elements inside the container. In all browsers other than IE9, you get the expected behavior. The items inside the container get their hover style and all is good. 

However, in IE9, when you hover over the elements, the container mysteriously increases in size. And for some reason it grows beneath the scrollbar.

And it keeps increasing in size for each item hovered over. This keeps pushing down all content below the container and destroys the layout of the page.

After much testing (and hair pulling) I came across a fix that seems to work without needing to alter the markup or general style of the page. I initially tried some of the old hasLayout tricks hoping that might help, but I had no luck. Finally I stumbled on min-height as a viable workaround.

By applying 

min-height:0%

to the style of the container, it stops the browser from magically adding extra space on hover.

Another, less flexible, workaround is to fix the height of the container. This may work for some situations, but it does force you to lock in a static height that won’t adjust based on content.

A sample page with the problem and workaround applied can be found here. The first container has the bug and the second container has the workaround applied. Both containers will behave the same in browser other than IE9.