IE9 link hover css color change vertical shift

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 开发者_如何学Gothe Link(a tag) down the page, its the whole containing table that moves.

---

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

---

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

---

Sort of found the problem, well makes the table stop moving. margin-top:-20px. Although it olny shifted down about 10px.

Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.

The font sizes, line-heights, all that css, is all good for the link.

Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.

Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).

---

For me I had to specify

height:100%;

Then I had to go ahead and specify

width:100%;

The 'min-height: 0px' by mohitp above got me on the right track.