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

1、问题

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

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

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

html 复制代码
<view class="videoContainer">
  <!-- 头部区域 -->
  <view class="search-box">
    <view class="search iconfont icon-sousuo" bindtap="toSearch">
      大家都在看 更多精彩视频
    </view>
  </view>
</view>
css 复制代码
.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);之后,缝隙消失

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

相关推荐
云浪11 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨18 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗19 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码21 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜23 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军28 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆37 分钟前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆1 小时前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试
JinSo1 小时前
create-easy-editor —— 快速搭建你的可视化编辑器
前端·前端框架·github
Watermelo6171 小时前
【前端实战】如何让用户回到上次阅读的位置?
前端·javascript·性能优化·数据分析·哈希算法·哈希·用户体验