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

Question

如果你看一下Chrome中这个小提琴:http://jsfiddle.net/up4Fa/

你会看到一个溢出的元素,里面有20px的填充!一切正常,按预期工作.

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

如果我在内部div上执行填充就会出现问题,但是我宁愿用一个div来修复它并且无法理解为什么火狐和IE有问题而不是Chrome？

编辑:文本不是任何人想知道的原因!如果删除文本,它将对红色框执行相同操作.

谢谢

Answer 1

看来,当您通过定位间接设置容器div的尺寸时,这些浏览器无法预测div的高度并正确渲染填充.解决此问题的一个快速而肮脏的技巧是删除容器的底部填充:

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

并为它的最后一个孩子添加一个底部边距:

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