css – 非镀铬浏览器中的溢出元素的底部填充不起作用

前端之家收集整理的这篇文章主要介绍了css – 非镀铬浏览器中的溢出元素的底部填充不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果你在Chrome中看到这个小提琴: http://jsfiddle.net/up4Fa/

你会看到一个溢出的元素,里面有20px的填充!所有罚款和工作如预期.

但是,如果您在IE9或Firefox中运行相同的测试,底部的文本会触发容器的边缘,并且底部填充被忽略…

如果我在内部的div上进行填充,那么这个问题就是这样,但是我更希望用一个div来修复它,不知道为什么BOTH Firefox和IE有问题,但是Chrome没有Chrome?

编辑:文字不是任何人想知道的原因!如果我删除文本,它将与红色框一样.

谢谢

解决方法

看来,当您通过定位间接设置容器div的维度时,这些浏览器无法预测div的高度并正确地渲染填充.
解决这个问题的一个快速而肮脏的手段是去除容器的底部填充:
div.container {
    ...
    padding: 20px 20px 0 20px;
    ...
}

并为其最后一个小孩添加底部边距:

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

http://jsfiddle.net/xa9qF/

原文链接:https://www.f2er.com/css/216990.html

猜你在找的CSS相关文章