IE7 Collapsing Bottom Margin Bug

posted by Kravimir at 7:59 PM on Dec. 6th, 2009

Categories: CSS, Browsers, Old MS Edge & IE, Bugs 1 comments

In IE5.5-7, an element that has "hasLayout" and has a bottom margin will sometimes wrongly collapse its bottom margin through the bottom edge of its parent (but not its parent's parent). This happens when its parent has bottom padding and/or a bottom border (which should prevent the margin from collapsing) but not "hasLayout", and at the same time the parent's parent has bottom padding, a bottom border, and/or "hasLayout".

element with bottom margin and hasLayout

The solution is simple. Simply trigger "hasLayout" on the parent element or remove the "hasLayout" trigger on the element itself.

element with bottom margin and hasLayout
#1 Gianluca 3:05 PM on Sep. 13th, 2012

That's a well-thought-out answer to a challenging quetsoin

Comment Form: