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

开源 同时被 2 个专栏收录
484 篇文章 1 订阅
32 篇文章 12 订阅

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

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

已经可以正常显示。

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值