css - Weird positioning in IE8 when hovering

Question

I have a collection of divs in the layout shown in the image. All four divs (A, B, C, D) are floated left and each have a link elements inside of them wrapping other content elements (mostly divs and images but some text as well)

The problem is that in IE8, when you hover over items B, C or D, the item you hover over drops down 100px or so. If you hover on B it pushes C and D down. If you hover on D, just D drops down.

It is only a problem in actual IE8, not IE9 in IE8 mode.

Has anyone come across this behaviour befor with links inside floated elements?

There is a ton of CSS, but I am using a standard clearfix on the content inside the floated containers. The widths and heights of the containers are % based, some of the elements inside have fixed px widths

Answer 1

很难说出根本问题。您可以做的一件事是在悬停时向您的 div 添加其他样式，这将阻止它们扩展。

#B:hover{height:200px;}
#C:hover{height:200px;}
#D:hover{height:200px;}