-
-
Save bitinn/6201106 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>margin collapse algorithm bug workaround</title> | |
| <style> | |
| body{ | |
| margin:0; | |
| } | |
| .example { | |
| /* margin collapse algorithem bug as in | |
| https://bugzilla.mozilla.org/show_bug.cgi?id=451791, | |
| margin-bottom incorrectly applied to child element with float */ | |
| margin-bottom: 20px; | |
| background: red; | |
| } | |
| .example-inner { | |
| float: left; | |
| } | |
| .clear { | |
| clear: both; | |
| } | |
| .solution1 { | |
| /* workaround */ | |
| border: 1px solid black; | |
| margin-bottom: 20px; | |
| background: red; | |
| } | |
| .solution1-inner { | |
| float: left; | |
| } | |
| .solution2 { | |
| /* alternative */ | |
| overflow: hidden; | |
| margin-bottom: 20px; | |
| background: red; | |
| } | |
| .solution2-inner { | |
| float: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="example"> | |
| <div class="example-inner"> | |
| has float | |
| </div> | |
| <div class="clear"></div> | |
| </div> | |
| <!-- | |
| <div class="solution1"> | |
| <div class="solution1-inner"> | |
| has float | |
| </div> | |
| <div class="clear"></div> | |
| </div> | |
| --> | |
| <!-- | |
| <div class="solution2"> | |
| <div class="solution2-inner"> | |
| has float | |
| </div> | |
| </div> | |
| --> | |
| <p>make sure margin still exists</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
to explain: any css property that prevent firefox from triggering margin collapse algorithm will work, such as non-default border, overflow, display value.
note that this is a rare situation: float child must be the first content under parent element with margin-bottom to reproduce the bug, and if said parent is under other element with non-default border, overflow, display value, it would not trigger.
to sum up: you need to be pretty unfortunate to encounter this bug, and workaround is trivial. that's probably why mozilla never got around to fix it.