第一次在这里问我自己的问题:)
我在一个网站上工作，我尝试使用通常的技巧将它垂直扩展到客户端窗口的底部:
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 上完美运行但现在它留下了 222px在 firefox 中的 html 容器下方 有间隙(根据 firebug)。糊涂了!
EDIT2:从技术上讲，我相信我知道这里出了什么问题。 Internet Explorer 8 认为负边距是“溢出”，并且由于溢出:隐藏，它杀死了边距。如果我删除 overflow: hidden 它不再有这种行为，但它会破坏设计的其余部分。有人有任何想法吗？
最佳答案
About Conditional Comments . How To Create an IE-Only Stylesheet .
尝试只为顶坐标为负的 IE8 设置样式:
<!--[if gte IE 8]>
<style>
.container { top: -164px; }
</style>
<![endif]-->
关于html - 垂直负边距在 IE8 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6618895/