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）？我做错了什么吗？

编辑：经过更多的游戏和娱乐，我发现通过用负面的顶部坐标替换负面的边距（并将所有容器设置为相对位置），在IE8上完美地解决了这个问题，但现在它在firefox中留下了222px的空白（根据firebug）。 困惑！

编辑2：我相信我知道这里的问题了，从技术上讲。 Internet Explorer 8认为负边距是“溢出”，因此由于overflow：hidden，它会消除边距。如果我删除overflow：hidden，它就不再具有这种行为，但会破坏其余设计。 有人有任何想法吗？

- Protected

---

你能在jsFiddle上写一下吗？ - thirtydot

我不知道如何使用那个 - 我从来没有用过 - 但是我可以稍后研究一下。 - Protected

Answer 1

关于条件注释。 如何创建只针对IE的样式表。

尝试使用负的上边距仅为IE8设置样式：

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

- VMAtm

---

哦，谢谢你的回答。这基本上就是我最终所做的，尽管我不喜欢使用特定于浏览器的hack。唉，IE ;) - Protected

@Protected IE hacks - 必要的恶 :( - VMAtm

Answer 2

没有时间深入研究：在IE7中，min-height存在缺陷。请访问此处了解更多信息：http://www.webdevout.net/browser-support-css

- Rob

---

谢谢，但这个问题是关于IE8的！ - Protected

@Protected - 是的，但你提到它在IE7中工作。这开始是一个答案，但应该是一个评论。 - Rob

我的意思是在隐藏溢出的容器中使用负边距 :) - Protected