当前位置: 首页 > news >正文

移动端设置position: fixed;固定定位,底部出现一条缝隙,不知原因,欢迎探讨!!!

1、问题 

在父盒子中有一个子盒子,父盒子加了固定定位,需要子盒子上下都有要边距,用margin或者padding挤开时,会出现缝隙是子盒子背景颜色的。

测试过了,有些手机型号有,有些没有,微信小程序同移动端都有

 如下代码,并没有设置底边框

<view class="videoContainer"><!-- 头部区域 --><view class="search-box"><view class="search iconfont icon-sousuo" bindtap="toSearch">大家都在看 更多精彩视频</view></view>
</view>
.videoContainer {background-color: #f8f9fd;height: 200vh;
}.videoContainer .search-box {position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 100%;background-color: gold;
}.videoContainer .search {margin: 15rpx auto 10rpx;width: 90%;height: 70rpx;line-height: 70rpx;border-radius: 40rpx;font-size: 28rpx;background-color: red;color: #767c92;letter-spacing: 2rpx;
}

 2、解决方法

1、父盒子不设置颜色,让其为默认的白色

2、设置父盒子高度不超过子盒子的【底部】(不包括子盒子的边距)

3、子盒子加上transform:translateZ(0);之后,缝隙消失

如果有更多方法,懂得其中原因,欢迎在评论区探讨

http://www.lryc.cn/news/300311.html

相关文章:

  • 有关网络安全的课程学习网页
  • 计算机网络-面试题
  • C++虚函数
  • MySQL数据库基础(二):MySQL数据库介绍
  • 常用文件命令
  • 在屏蔽任何FRP环境下从零开始搭建安全的FRP内网穿透服务
  • OpenGL-ES 学习(1)---- AlphaBlend
  • Python 函数的学习笔记
  • 详解 Redis 实现数据去重
  • FreeRTOS 延迟中断处理
  • 计网体系结构
  • linux系统zabbix工具监控web页面
  • VMware虚拟机网络配置
  • 代码随想录算法训练营DAY18 | 二叉树 (5)
  • 企业微信自动推送机器人的应用与价值
  • Matplotlib plt.plot:从入门到精通,只需一篇文章!
  • Linux中sigaction函数和SIGCHLD信号的使用
  • 【MySQL】操作库 —— 表的操作 -- 详解
  • ZigBee学习——在官方例程实现组网
  • ES实战--wildcard正则匹配exists过滤字段是否存在
  • C++学习:二分查找
  • 语言与科技创新(大语言模型对科技创新的影响)
  • 【C语言】简单贪吃蛇实现保姆级教学!!!
  • rtt设备io框架面向对象学习-uart设备
  • Innodb下修改事务工作流程(buffer pool、redo log、undolog)
  • redis为什么使用跳跃表而不是树
  • 【matalab】基于Octave的信号处理与滤波分析案例
  • Elasticsearch:特定领域的生成式 AI - 预训练、微调和 RAG
  • HarmonyOS—UI 开发性能提升的推荐方法
  • 84 CTF夺旗-PHP弱类型异或取反序列化RCE