Css 溢出内无底部边距：自动元素

以下是我的测试用例：

---

我有一个带有

溢出：auto

的div，它里面有一个带边距和边框的div。内部div在IE8中没有底部边距，但在Webkit和Firefox中显示正确。

我删除了

的高度。外部
div为我工作！
很可能它不起作用，因为你的内部div高于100px
 Opera也以错误的方式呈现它：

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


不幸的是，我知道它不能解决IE8问题。但这是一个已知的bug，css2.1规范并没有精确地描述这个测试用例应该如何呈现

正如tildy所评论的，问题已经被记录在案。我想我找到了一个可行的解决方案，但它需要额外的标记：我在外部和内部之间添加了一个div，带有5px的透明边框。看

我试着在外面加上填充物，但也没用。两者之间的基本原理是：“滚动条允许用户滚动内容，并且仅允许滚动内容”。因此，滚动条会在内容停止的地方停止，即使之后有填充或边距。
而不是
div.inner
上的边距。也许你可以尝试在
div.outer
上设置
padding:5px
好的，我有一个可怕的漏洞要告诉你：

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

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

JSFiddle：

为了克服这一点，你可以只针对IE8（因此IE8和以下的IE7不能正常工作一次），并将
margin-bottom
设置为大约
1px
…但这会变得更加粗糙。我上面添加的代码不应该对任何其他浏览器有任何明显的影响

附加说明

如果删除
背景色
并在IE9的IE8兼容模式下检查代码，则代码会呈现良好状态，
边距底部
为
5px
。然而，在我的模拟器中（通常非常精确），
边距底部
会回到
0
，如果不添加
背景色
，讽刺的是，JSFIDLE在IE8中似乎不起作用，这很有趣

不管怎样，我刚才也遇到了同样的问题，我采用了以下方法：在内部元素上使用after，在底部边距应该是的位置注入内容：

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

请点击此处：

但是，只有在不需要红色边框的情况下，这才有效。我不确定它是否只是为了展示问题，还是你真的需要它？如果需要的话，恐怕这个答案不起作用。
也许我的模拟器是垃圾，但在我看来，它在IE7中是一样的。我还检查了IE9的IE7模式。底部边距在IE7中为您显示？这似乎很奇怪。顺便说一句，我用的是IE8，不是IE7，我编辑了我的问题。啊，好的-是的，IE8中没有显示。你是先说IE7还是我产生幻觉了？我说IE7，然后我编辑了我的问题。但IE8在兼容模式下确实显示了底部边距，你是对的。。。我很困惑。检查这个：谢谢，但我需要高度（或底部：外部div上的声明）。它在某些浏览器中工作，但在IE8中不工作。正如我以前写的那样。