火狐浏览器中pandding-bottom无效的问题

问题描述

最近在项目开发中遇到一个奇怪的问题，当我使用 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;
}

这个时候，查看火狐浏览器中：

已经可以正常显示。

总之，各个浏览器内的兼容性问题可能不会特别注意，但是在用户体验方面会造成不好的影响。希望在平时的工作中多多注意并吸取经验。