垂直负边距在 IE8 中不起作用？

Question

first time asking my own question here:)

I'm working on a website and I tried extending it vertically to the bottom of the client window using the usual trick:

html, body { height: 100%; }
.container { min-height: 100%; }

I then wanted to add some headers above the main content and a sticky footer at the bottom. I wrapped both of these in their own containers and pulled the header onto the top like so:

.top { position: relative; z-index: 1; height: 168px; }
.end { height: 58px; }

Knowing the height of the header and sticky footer, I then set out to adjust the total height of the page such that it would fill up the client window exactly (no scrollbars) unless the content was too long. I did this with negative margins:

.container { overflow: hidden; min-height: 100%; margin-top: -164px; margin-bottom: -58px; }
.container-in { margin-top: 164px; margin-bottom: 58px; }

The second container is within the first one and it's where I put the actual content of each page.

So, this works just fine on Firefox 4/5 - Absolutely nothing is off, it's just as intended. Chrome also seems ok. However, on IE8, it's ignoring the negative margin on.container (I checked with developer tools). The container begins after the.top, and as a result there's a 164px gap between the.top and the.container-in because of the.container-in's margin.

And the funny thing is - if I switch IE8 to IE7 compatibility mode, this problem no longer occurs, Negative margins behave just fine in IE7 mode, but of course a bunch of other stuff breaks. so telling IE to use compatibility mode isn't an option.

Any ideas on how to work around this problem/use a different solution to obtain the same effect in all browsers (IE7 not required)? Am I doing anything wrong?

EDIT: After some more fun and games I discovered that by replacing the negative margins with negative top: coordinates (and setting all containers as relative) it works perfectly on IE8 but now it leaves a 222px gap below the html container in firefox (according to firebug). Confused!

EDIT2: I believe I know what's wrong here, technically speaking. Internet Explorer 8 thinks the negative margin is 'overflow', and since overflow: hidden, it kills the margin. If I remove overflow: hidden it no longer has this behavior, but it breaks the rest of the design. Anyone has any ideas yet?

Answer 1

About Conditional Comments . How To Create an IE-Only Stylesheet .

Try to set style only for IE8 with negative top coordinates:

<!--[if gte IE 8]>
<style>
.container { top: -164px; }
</style>
<![endif]-->

Answer 2

Don't have time to go beyond this: min-height is buggy in IE7. Go here for more info on that: http://www.webdevout.net/browser-support-css