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

Question

第一次问我自己的问题:)

我正在一个网站上工作,我尝试使用通常的技巧将其垂直扩展到客户端窗口的底部:

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

然后,我想在主要内容上方添加一些标题,在底部添加粘性页脚.我把它们都装在自己的容器里,然后将标题拉到顶部,如下所示:

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

知道了页眉和粘性页脚的高度,然后我开始调整页面的总高度,这样它就会完全填满客户端窗口(没有滚动条),除非内容太长.我用负边距做了这个:

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

第二个容器在第一个容器内,它是我放置每个页面的实际内容的地方.

因此,这在Firefox 4/5上运行得很好 - 绝对没有任何关闭,它就像预期一样.Chrome似乎还可以.但是,在IE8上,它忽略了.container的负余量(我查看了开发人员工具).容器在.top之后开始,因此.top和.container-in之间存在164px的间隙,因为.container-in的边距.

有趣的是 - 如果我将IE8切换到IE7兼容模式,这个问题就不再发生了!在IE7模式下,负边距表现得很好,但当然其他一些东西也会中断,因此告诉IE使用兼容模式不是一种选择.

有关如何解决此问题的任何想法/使用不同的解决方案在所有浏览器中获得相同的效果(不需要IE7)？我做错了吗？

编辑:经过一些更多的乐趣和游戏,我发现通过用负顶部替换负边距:坐标(并将所有容器设置为相对),它在IE8上完美运行但现在它在Firefox 中的html容器下面留下了222px的间隙(根据萤火虫).困惑!

EDIT2:从技术上讲,我相信我知道这里有什么问题.Internet Explorer 8认为负边距是"溢出",并且由于溢出:隐藏,它会杀死边距.如果我删除溢出:隐藏它不再有这种行为,但它打破了设计的其余部分.任何人都有任何想法吗？

Answer 1

关于条件评论。如何创建仅适用于 IE 的样式表。

尝试仅为具有负顶部坐标的 IE8 设置样式：

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