IE9 link hover css color shift vertical shift

Question

IE 9, when you hover over a link, pushes a piece of HTML down the page. When i remove color from

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

the problem does not arise.

I cannot paste all the code here and am pretty sure that this is a unique problem on this page. But maybe someone there saw something similar.

Does not move the link (tag) down the page; its entire containing table moves.

Answer 1

This problem occurs in IE9 when the container element is set to overflow: auto , and some hover action occurs in the child element.

There is a very simple solution to add min-height: 0px to the container element that works.

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

Answer 2

Make sure that the line and font size properties are the same for normal and hovering.

Answer 3

Part of the problem found, well makes the stop move. Margin Top: -20px. Although he olni moved about 10 pixels.

Perhaps a problem with IE9. IE7 / 8 actually moves the table at boot time.

Font size, line height, everything css is good for reference.

Marc B is probably close to an IE issue displaying something wrong, and floating floats, etc., to mess up.

Now you need to create a table style with a page layout table (hugh, layout table layout).

Answer 4

I needed to specify

 height:100%; 

Then I had to go ahead and point out

 width:100%; 

"min-height: 0px" from mohitp is taller than me on the right track.