IE9 link hover css color change vertical shift

Question

IE 9 on Hover over a link, pushes some of the HTML down the page. When i remove the color from

td.subarea > h2 > a:hover   { color: #aa051a; text-decoration: none;}  

the problem does not occur.

I can't paste all the code here, and fairly sure its a unique problem to this page. But maybe someone out there has seen something similar.

Its not moving the Link(a tag) down the page, its the whole containing table that moves.

Answer 1

This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.

There is a very simple solution of adding min-height: 0px to the container element, which works.

The detailed explanation of the bug and this solution can be found in this link: http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround

Answer 2

Make sure your line-height and font-size properties are the same for normal and hover.