6

第一次在这里问我自己的问题:)

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

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 上运行良好 - 绝对没有任何问题，正如预期的那样。铬似乎也不错。但是，在 IE8 上，它忽略了 .container 上的负边距（我使用开发人员工具进行了检查）。容器在 .top 之后开始，因此 .top 和 .container-in 之间存在 164px 的间隙，因为 .container-in 的边距。

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

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

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

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

4

2 回答 2

3

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

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

<!--[if gte IE 8]>
<style>
.container { top: -164px; }
</style>
<![endif]-->
于 2011-07-09T18:59:02.740 回答
1

没有时间超越这个：最小高度在 IE7 中是错误的。去这里了解更多信息：http ://www.webdevout.net/browser-support-css

于 2011-07-09T20:19:16.197 回答