问题描述
最近在项目开发中遇到一个奇怪的问题，当我使用 padding-bottom：100px 在页面底部，高度为100px。在Chrome上显示正常：
但是在火狐浏览器中，却不起作用：
造成的现象就是有一部分内容展示不出来。
导致原因
一番查询之后，是因为火狐和ie浏览器会出现‘吞吃’的情况，当节点的内容超过了自身高度，此时还给节点设置了overflow:auto；的话，overflow属性会将超出的部分剪裁到padding edge，所以才出现了padding-bottom无效的问题。
解决方案
在需要使用padding-bottom的节点上将padding-bottom设置为0，然后使用::after伪元素，设置display: block, height等于需要设置的padding-bottom的值。即可解决浏览器之间关于padding-bottom的差异性问题。
#above:after {
content: "";
height: 100px;
display: block;
}
这个时候，查看火狐浏览器中：
已经可以正常显示。
总之，各个浏览器内的兼容性问题可能不会特别注意，但是在用户体验方面会造成不好的影响。希望在平时的工作中多多注意并吸取经验。
30
