垂直负边距在 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 之后开始，由于 .container-in 的边距，因此 .top 和 .container-in 之间有 164px 的间隙。

有趣的是——如果我将IE8切换到IE7兼容模式，这个问题就不再出现了！负边距在 IE7 模式下表现得很好，但当然会破坏其他一些东西，所以告诉 IE 使用兼容模式不是一个选择。

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

编辑：经过一些更多的乐趣和游戏后，我发现通过用负 top: 坐标替换负边距（并将所有容器设置为相对），它在 IE8 上完美运行，但现在它留下了 222px 间隙 低于 firefox 中的 html 容器（根据 firebug）。使困惑！

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

Answer 1

关于条件注释。 如何创建仅限 IE 的样式表 。

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

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

Answer 2

没有时间去超越这个：min-height 在 IE7 中是有问题的。转到此处了解更多信息： http://www.webdevout.net/browser-support-css