Question

好的，我希望这不是一个简单的疏忽，但我已经在这方面工作了好几个小时！

我正在使用的页面上有一个相当复杂的HTML / CSS结构。我在页面的最底部有一个文本位于底部边距为10px的div中。该div位于另一个底部边缘为10px的div中;。该div位于链上的其他div中，直到<body>。

由于某种原因，文本正对着div的底部，它在里面。我为人们创造了一个极简主义的复制品。它确实重现了这个问题，我只希望我没有删除任何其他有助于解决这个问题的问题。

我确实让它在最新的镀铬处工作，高度为100％;在那里的某个地方（我不记得现在在哪里）但它没有解决firefox中的问题，即。这两种浏览器都具有奇怪的css行为，它们最初以正确的底部边距大小显示，但立即向下跳回以使文本再次没有底部边距。这就像一点点。

哦，也在我的repro html中，即没有显示任何居中（至少ie9）。我希望这不会成为问题。我当然可以轻松地解决这个问题。

在chrome中，如果你检查元素，它会突出显示蓝色的文本div，蓝色边界框显示div超出当前显示的位置。

我感谢大家的意见/帮助。

Answer 1

将overflow: hidden添加到#SubmissionDetails以通过阻止div上的collapsing margins行为来解决边距问题。

添加doctype作为逃离Quirks Mode的第一行并在Internet Explorer中修复您的页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

（你也可以使用更短的<!DOCTYPE html>，我只是坚持你所拥有的）

进行此更改还可以改善其他浏览器中的内容（也就是说，它会提高一致性）。

Answer 2

在您的示例中，包含思想标记的div（当前没有与之相关的类）添加以下内容：

height: auto; overflow: hidden;

Answer 3

使用填充代替。边缘就在那里，只是边缘没有填充背景（这就是为什么它看起来没有分离。）它就在那里，它只是不可见。

element.style {
    padding-bottom: 10px; /* change the margin property to padding */
    font-size: .9em;
    font-style: italic;
}