css - 底部填充不适用于非 Chrome 浏览器中的溢出元素

Question

如果您在 Chrome 中查看这个 fiddle :http://jsfiddle.net/up4Fa/

您会看到一个溢出元素，其中有 20 像素的内边距!一切正常，按预期工作。

但是，如果您在 IE9 或 Firefox 中运行相同的测试，底部的文本会触及容器的边缘，底部填充将被忽略...

如果我在一个内部 div 上填充它会出现问题，但我更愿意用一个 div 修复它并且无法理解为什么 firefox 和 IE 都有问题但 Chrome 没有？

编辑:如果有人想知道，文本不是原因!如果我删除文本，它将对红色框执行相同的操作。

谢谢

Answer 1

似乎当您通过定位间接设置容器 div 的尺寸时，那些浏览器无法预测 div 的高度并正确呈现填充。解决此问题的一个快速而肮脏的技巧是移除容器的底部填充:

div.container {
    ...
    padding: 20px 20px 0 20px;
    ...
}

并为它的最后一个 child 添加一个底边距:

div.container > *:last-child {
    margin-bottom: 20px;
}

http://jsfiddle.net/xa9qF/