底部填充不工作在非chrome浏览器中的溢出元素 [英] Bottom padding not working on overflow element in non-chrome browsers

问题描述

如果您在Chrome中查看这个小提琴： http://jsfiddle.net/up4Fa/

If you take a look at this fiddle in Chrome: http://jsfiddle.net/up4Fa/

你会看到一个溢出的元素，里面有20px的padding！

You will see an overflowing element that has 20px of padding inside it! All fine and working as expected.

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

However if you run the same test in IE9 or Firefox the text at the bottom touches the edge of the container and the bottom padding is being ignored...

如果我在内部div做填充将会的问题，但我宁愿用一个div修复它，不明白为什么BOTH firefox和IE有问题，但没有Chrome？

If I do the padding on an inner div it will the issue, BUT I'd much rather fix it with one div and can't understand why BOTH firefox and IE have problems but not Chrome?

编辑：文本不是原因，以防任何人想知道！

The text isn't the reason in case anyone was wondering! It will do the same with the red box if I remove the text.

感谢

推荐答案

看来，当你通过定位间接地设置容器div的维度时，这些浏览器不能预测div的高度，并且正确地呈现填充。
修复此问题的一个快速和肮脏的窍门是删除容器的底部填充：

It seems that as you are setting the dimensions of the container div indirectly by positioning, those browsers fail to predict the height of the div and render the padding properly. A quick and dirty trick to fix this is to remove the bottom padding of the container:

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

：

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

http://jsfiddle.net/xa9qF/

这篇关于底部填充不工作在非chrome浏览器中的溢出元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！