问题
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.
回答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
回答2:
Make sure your line-height and font-size properties are the same for normal and hover.
回答3:
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).
回答4:
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.
来源：https://stackoverflow.com/questions/7445750/ie9-link-hover-css-color-change-vertical-shift