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

火狐浏览器中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;
}

这个时候,查看火狐浏览器中:
在这里插入图片描述

已经可以正常显示。

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

Chatopera 研发团队 聊天机器人 机器学习 智能客服
https://www.chatopera.com 北京华夏春松科技有限公司:为企业交付智能客服系统、智能对话机器人、机器人客服、Chatbot。
已标记关键词 清除标记