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上完美运行但现在它留下了222px gap 低于 firefox中的html容器（根据firebug）。困惑！

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

Answer 1

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

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

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

Answer 2

没有时间超越这个：在IE7中，min-height是错误的。点击此处了解更多信息：http://www.webdevout.net/browser-support-css

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

2 个答案: