前端之家收集整理的这篇文章主要介绍了
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