问题描述
最近在项目开发中遇到一个奇怪的问题,当我使用 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;
}
这个时候,查看火狐浏览器中:
已经可以正常显示。
总之,各个浏览器内的兼容性问题可能不会特别注意,但是在用户体验方面会造成不好的影响。希望在平时的工作中多多注意并吸取经验。
https://www.chatopera.com 北京华夏春松科技有限公司:为企业交付智能客服系统、智能对话机器人、机器人客服、Chatbot。