I Steps: Go to http://cn.msn.com/ Scroll to the end of the page. II Issue: The search bar at the bottom of the page has wrong layout. It is shifted upwards III Conclusion: On removing div style overflow:hidden, FF/Opera behave same as Safari. IV Other browsers: IE7: ok FF3: ok Opera9.24: ok V Nightly tested: 31238
Created attachment 20042 [details] screenshot
Created attachment 20043 [details] reduction
Yup, we're wrong here. We're allowing margins to collapse through a BFC established with "overflow:hidden", which is a violation of the spec. Here's a test case: <!DOCTYPE html> <div id=error></div> <div id=a> <div id=should-be-bfc></div> <div id=b></div> </div> <style> #a { height: 40px; margin-top: 20px; } #b { height: 20px; margin-top: 20px; background: green; } #should-be-bfc { overflow: hidden; } #error { height: 20px; width: 100%; background: red; position: absolute; top: 40px; z-index: -1; } body { margin: 0; } </style> If you change the "overflow:hidden" to "display:table" (another way to establish a BFC), you see the correct behavior (the red is hidden, because the green block is pushed further down by its margins).
Still reproduces in Safari Version 9.0.3 (11601.4.4) on OS X El Capitan. Looks like this was fixed in Chrome; it doesn't repro in Chrome 48.
Safari, Chrome, and Firefox show the same rendering behavior for this test case. I do not believe any further compatibility issue remains.