If you have a div with a min-height value specified, and you place a "hr" tag inside that div, the div inherits the space from below the hr. This gives the appearance of margin below the div when no margin should be present. This bug is not apparent when the div has a specified height or if you give the div a border.
Created attachment 7555 [details] Test XHTML Page
Created attachment 7660 [details] Example of bug in a layout On both Safari and Opera, a gap mysteriously appears between the MAIN div and the FOOTER div when an "hr" is placed inside the MAIN div. This only happens when the MAIN div has a "min-height" value and no border. On all other browsers, there is never a gap between the two divs.
We implement the space around <hr>s using margins. The bottom margin of the <hr> then collapses with the parent div. This is correct in terms of our implementation. It may be that Firefox and WinIE don't use margins to create the space around an <hr>. We'll need to investigate what exactly they do and try to emulate it.
The issue at hand is not limited to <hr> (which e.g. in Gecko also has margins). It is visible for any block level element. The key is the use of min-/max-height on the parent element. In that case, see CSS 2.1:8.3.1 Collapsing margins [quote] The bottom margin of an in-flow block-level element with a 'height' of 'auto' and 'min-height' less than the element's used height and 'max-height' greater than the element's used height is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border. [/quote] Here are some more tests illustrating the issue (in 'modern' browsers) http://www.brunildo.org/test/collminmax.html What IE 6/7 does is something different, as (height) min- and max height trigger the dreaded 'hasLayout' hell (in this case, the top/bottom margin of the descendant is swallowed into nothingness).
This issue reproduces in Safari 16. We do not match Chrome or Firefox.
<rdar://problem/96545373>