1

查看以下内容：

http://jsfiddle.net/symposion/P8KBe/7/

在 IE8 中，然后是 Chrome/Firefox/IE9+。您会注意到，在 IE8 中，内部蓝色 div 在最外层 div 的边缘被切掉#slicer，尽管事实上它#outer只是overflow:hidden. 如果我将min-heighton #outer 更改为显式height，问题就会消失。

这个例子可能看起来是做作的，但这只是因为我在这里简化了它。我在一个真实的项目中遇到过这个问题，这让我很头疼，因为我改变正在使用的布局原则的范围有限——还有太多其他依赖项。我在这里寻找两件事：

  1. 这是某处列出的已知错误吗？这个问题最简单的陈述是什么？我仍然不觉得我真正理解导致 IE8 出错的潜在错误；它仍然不是一个特别简单的测试用例。

  2. 是否有不涉及更改#outerand样式的解决方法#slicer？在我的真实世界示例中，这些是较大页面框架的一部分，我将难以更改，而该#inner位更容易在我的控制之下。

（更新）原始示例非常做作，力求最小化。我在这里创建了一个新的 JSFiddle：http: //jsfiddle.net/symposion/NDa6U/，它可以更好地了解现实世界的问题。如果您在 IE8 中调整 html 窗格的大小，您会注意到最终绿色的内部内容部分开始被错误地截断。我正在寻找的是让这部分保持它所包含的 div 高度的 100%，理想情况下不必对#innerContainer. 但老实说，我会对任何保留基本布局原则的解决方案感兴趣（底部部分从定义的像素位置扩展到距页面底部的定义距离，但具有最小高度）在 IE8 中。

4

1 回答 1

1

http://jsfiddle.net/thirtydot/NDa6U/22/怎么样？

#innerContainer {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}​

以下是有关此技术的一些（相对）旧背景信息：http ://www.positioniseverything.net/articles/onetruelayout/combined

根据个人经验，它可以在所有现代浏览器中正常工作。

于 2012-11-23T10:44:51.580 回答