IE7 collapsing issue when layout is reflowed

[Scotchester]

URL

http://cfpb.github.io/cf-grid/custom-demo/

Actual Behavior

In IE7, layout reflows (triggered by something like resizing the window or opening an expandable) create a chain reaction of the grid collapsing in on itself.

Expected Behavior

The grid resizes as appropriate and does not collapse.

Steps to Reproduce

1. Open IE7.
2. Browse to http://cfpb.github.io/cf-grid/custom-demo/
3. Resize the window.
4. Watch.

Screenshot

[himedlooff]

I think it's an issue with the box sizing polyfill and negative margins on the columns. Here are some similar issues:

• https://github.com/coliff/bootstrap-ie7/issues/3
• boxsizing.htc causes page elements in IE7 to shrink Schepp/box-sizing-polyfill#38
• Doesn't work at all for me Schepp/box-sizing-polyfill#2

A quick fix for us is to remove the polyfill on .wrapper(), it's not even needed anyway:

.wrapper( @wrapper-width: @wrapper-width ) {
  max-width: (@wrapper-width - @gutter-width);
  padding: 0 ( @gutter-width / 2 );
  margin: 0 auto;
  position: relative;
  clear: both;
}

Then for IE7 we can ditch the negative margins on columns.

  .lt-ie8 & {
    // hack inline-block into submission
    display: inline;
    margin-right: 0;

    *zoom: 1; // Clearfix hack for IE 6/7 only
    *behavior: url('@{box-sizing-polyfill-path}/boxsizing.htc');
  }

Things won't line up properly but at least it won't shrink. Once we "Stop the bleeding" then we can figure out a more robust solution that won't cause huge alignment issues in IE7.

[Scotchester]

Potential longer-term solutions, in order of preference:

1. Let IE7's gutters be flexible (eliminating the need for box-sizing).
2. Replace the whole shebang with a float-based system.

[himedlooff]

@Scotchester, is idea 2 replacing it for all browsers or just for IE7? My gut reaction is I wouldn't mind doing something special just for IE7. I don't think we should let this issue affect other browsers and the progress we have already made.

[himedlooff]

Oddly enough the negative margin isn't needed in IE7, things are aligning nicely.