Internet Explorer 7 Crashing becasue of CSS in Zurb Foundation

Question

I am using Zurb Foundation 3 and am trying to get it to work in Internet Explorer 7.

The error: What happens is the page loads and renders the content fine, but then you cannot click on anything, scroll or interact at all and then Internet Explorer then stops responding.

The cause: I have narrowed it down to these two lines within the CSS. If I take them out then it works fine in Internet Explorer 7, but doesn't look how I would expect.

.c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12, 
header[role="banner"] h1, header[role="banner"] nav, header[role="banner"] aside,  
div[role="main"] div#main-container, div.sub-footer aside > div, 
footer[role="contentinfo"] > .row h1, footer[role="contentinfo"] > .row .info, 
footer[role="contentinfo"] > .row nav 
{ 
    float: left; 
}

.c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12,
header[role="banner"] h1, header[role="banner"] nav, header[role="banner"] aside, 
div[role="main"] div#main-container, div.sub-footer aside > div, 
footer[role="contentinfo"] > .row h1, footer[role="contentinfo"] > .row .info, 
footer[role="contentinfo"] > .row nav 
{ 
    position: relative; 
    min-height: 1px; 
    padding: 0 15px; 
}

The issue: The only problem here is this code is generated by SASS using a mixin provided by Zurb Foundation, which I can't remove for the rest of the project.

I have not reached the 4096 limit on selectors for IE either, I did a count and it is under 1000.

Any suggestions would be greatly appreciated.

Answer 1

I am not using Zurb, but I've noticed that IE7 crashes whenever I have two elements that are directly nested one inside the other and both of which have the min-height property set. For example, this markup would cause IE7 to crash

<div style="min-height: 1px">
    <div style="min-height: 1px">
        Hello IE 7!
    </div>
</div>

But this would not

<div style="min-height: 1px">
    <div>
       Hello IE 7!
    </div>
</div>