IE7-/Win: disappearing bottom margin on hover (jumping margin effect)

In case of nested boxes, vertical margins are sometimes wrong in IE7-. What is worse, if you have a hover effect, sometimes the margins disappear and reappear as some hovers are triggered. Workarounds are possible, however this problem always requires extra testing. Some of these cases are fixed in IE7 but not all.

In the following test a yellow box contains another box with a margin-bottom. Inside the latter, other boxes with anchors having an hover effect. All this could be marked up using ul/li (see IE7-/Win: disappearing UL bottom margin on hover), here I used only divs just for simplicity. When moving the mouse vertically down and up through the anchors the margin-bottom disappears and comes back.

one
two

CSS tests home