Interop: Floaters and BFC within inline-blocks

Hi,

We've been fixing live site bug in IE 11 - when there's a shrink-to-fit container (like an inline-block) that contains a floater followed by a non-floater, they should be stacked vertically: http://jsfiddle.net/qdboet20/5/ (works in Chrome, Firefox, IE11 has a bug we're fixing)

While working on the fix, Kurt, our developer, has found a difference in behavior between other browsers: http://jsfiddle.net/kurt_catti_schmidt/u756q75q/ (with the fix - IE would match Chrome, but not Firefox)

Here is what the spec (http://www.w3.org/TR/CSS2/visuren.html#bfc-next-to-float) says here: "If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. "

What is the expected right behavior in the second case? 

Received on Thursday, 28 August 2014 19:45:55 UTC