溢出内没有底部边距：自动元素

Question

以下是我的测试用例：http://jsfiddle.net/bpw98/15/

我有一个overflow:auto的div，里面有一个带有边距和边框的div。内部div在IE8中没有底部边距，而在Webkit和Firefox中正确显示。

Answer 1

Opera也以错误的方式渲染它：

解决方案在浏览器中：在外部框中使用填充，而不是在内部使用边距。

Here is the code

不幸的是，它不解决IE8问题，我知道。但这是一个已知的错误，CSS 2.1规范并没有详细说明应该如何呈现这个测试用例。

Check this

Answer 2

好的，我有一个可怕的黑客：

div.outer:after {
    content:"";
    background-color: inherit;
}

这适用于我，但在5px的底部留下了大于div.outer的边距：

JSFiddle：http://jsfiddle.net/wwTnS/

为了解决这个问题，你可以只针对IE8（IE8及以下版本，因为IE7无法正常工作一次），并将margin-bottom设置为大约1px ...但是这样会变得更加hacky 。我上面添加的代码不应该对任何其他浏览器产生任何明显的影响。

额外注意

如果删除background-color并检查IE9 IE8兼容模式下的代码，则呈现正常，margin-bottom为5px。但是，在我的模拟器中（通常非常准确），如果您不添加margin-bottom，0将返回background-color。

Answer 3

正如tildy评论的那样，问题已经记录在案。我想我找到了一个有效的解决方案，但它需要额外的标记：我在外部和内部之间添加了一个div，带有5px透明边框。请参阅http://jsfiddle.net/bpw98/19/。

我尝试将填充添加到外部，但它也没有用。它之间的基本原理是：“滚动条允许用户滚动内容，只滚动内容”。因此，滚动条会停止内容停止的位置，即使在此之后存在填充或边距。

Answer 4

代替div.inner上的保证金，您可以尝试在padding: 5px上设置div.outer

Answer 5

具有讽刺意味的是，jsfiddle似乎并不适用于IE8，这非常有趣。

无论如何，我刚才遇到了同样的问题并沿着使用路线前进：在内部元素之后注入底部边距应该是的内容：

div.inner {
    margin: 5px 5px 0;
}
div.inner:after {
    content: " ";
    display: block;
    height: 5px;
}

jsfiddle here：http://jsfiddle.net/bpw98/41/

但是，这只适用于您不需要红色边框的情况。我不确定它是否只是出于展示问题的目的，或者您确实需要它？如果需要，我担心这个答案不会起作用。

Answer 6

我删除了.outer div的高度，它对我有用！ 可能它不起作用，因为你的内部div高于100px;