移动端设置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://xiahunao.cn/news/2774296.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

LeetCode 0993. 二叉树的堂兄弟节点:深度优先搜索(BFS)

【LetMeFly】993.二叉树的堂兄弟节点&#xff1a;深度优先搜索(BFS) 力扣题目链接&#xff1a;https://leetcode.cn/problems/cousins-in-binary-tree/ 在二叉树中&#xff0c;根节点位于深度 0 处&#xff0c;每个深度为 k 的节点的子节点位于深度 k1 处。 如果二叉树的两个…

java_error_in_pycharm.hprof文件是什么?能删除吗?

java_error_in_pycharm.hprof文件是什么&#xff1f;能删除吗&#xff1f; &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333;hprof格式文件介绍&#x1f333;&#x1f333;java_error_in_pycharm.hprof文件什么情况下能删除&#x1f333;&…

【Nicn的刷题日常】之有序序列合并

1.题目描述 描述 输入两个升序排列的序列&#xff0c;将两个序列合并为一个有序序列并输出。 数据范围&#xff1a; 1≤&#xfffd;,&#xfffd;≤1000 1≤n,m≤1000 &#xff0c; 序列中的值满足 0≤&#xfffd;&#xfffd;&#xfffd;≤30000 0≤val≤30000 输入描述…

Java 将TXT文本文件转换为PDF文件

与TXT文本文件&#xff0c;PDF文件更加专业也更适合传输&#xff0c;常用于正式报告、简历、合同等场合。项目中如果有使用Java将TXT文本文件转为PDF文件的需求&#xff0c;可以查看本文中介绍的免费实现方法。 免费Java PDF库 本文介绍的方法需要用到Free Spire.PDF for Java…

波卡 2023 四季度报告:开发者数量位列加密生态前三,五项新技术将于今年发布

作者&#xff1a;Nicholas Garcia&#xff5c;Messari 研究分析师 编译&#xff1a;OneBlock 原文&#xff1a;https://messari.io/report/state-of-polkadot-q4-2023?utm_mediumorganic_social&utm_sourcetwitter_messari&utm_campaignstate_of_polkadot_q4_2023 …

07:Kubectl 命令详解|K8S资源对象管理|K8S集群管理(重难点)

Kubectl 命令详解&#xff5c;K8S资源对象管理&#xff5c;K8S集群管理 kubectl管理命令kubectl get 查询资源常用的排错命令kubectl run 创建容器 POD原理pod的生命周期 k8s资源对象管理资源文件使用资源文件管理对象Pod资源文件deploy资源文件 集群调度的规则扩容与缩减集群更…

Mysql-Explain-使用说明

Explain 说明 explain SELECT * FROM tb_category_report;id&#xff1a;SELECT识别符&#xff0c;这是SELECT查询序列号。select_type&#xff1a;表示单位查询的查询类型&#xff0c;比如&#xff1a;普通查询、联合查询(union、union all)、子查询等复杂查询。table&#x…

[设计模式Java实现附plantuml源码~行为型]请求的链式处理——职责链模式

前言&#xff1a; 为什么之前写过Golang 版的设计模式&#xff0c;还在重新写Java 版&#xff1f; 答&#xff1a;因为对于我而言&#xff0c;当然也希望对正在学习的大伙有帮助。Java作为一门纯面向对象的语言&#xff0c;更适合用于学习设计模式。 为什么类图要附上uml 因为很…

多维时序 | Matlab实现RF-Adaboost随机森林结合Adaboost多变量时间序列预测

多维时序 | Matlab实现RF-Adaboost随机森林结合Adaboost多变量时间序列预测 目录 多维时序 | Matlab实现RF-Adaboost随机森林结合Adaboost多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现RF-Adaboost随机森林结合Adaboost多变量时间序列预…

YOLOv8改进 | 利用训练好权重文件计算YOLOv8的FPS、推理每张图片的平均时间(科研必备)

一、本文介绍 本文给大家带来的改进机制是利用我们训练好的权重文件计算FPS,同时打印每张图片所利用的平均时间,模型大小(以MB为单位),同时支持batch_size功能的选择,对于轻量化模型的读者来说,本文的内容对你一定有帮助,可以清晰帮你展示出模型速度性能的提升以及轻量…

极致成本,如何基于容器计算服务 ACS 打造企业级幻兽帕鲁私服 SaaS 服务?

作者&#xff1a;韩运韬&#xff08;青炽&#xff09; 《幻兽帕鲁》是一款最近大热的开放世界生存游戏。据报道。上市不到一周&#xff0c;《幻兽帕鲁》销量已突破 700 万份&#xff0c;成为名副其实的现象级游戏。根据游戏数据库网站 SteamDB 的数据显示&#xff0c;《幻兽帕…

QTabWidget和QTabBar控件样式设置(qss)

QTabWidget和QTabBar控件样式设置 1、QTabWidget样式可自定义的有哪些示例&#xff1a;效果图 2、QTabBar样式可自定义的有哪些示例效果图 1、QTabWidget样式可自定义的有哪些 QTabWidget::pane{} 定义tabWidgetFrameQTabWidget::tab-bar{} 定义TabBar的位置QTabWidget::tab{}定…

性能篇:如何解决高并发下 I/O 瓶颈?

我们可以有效地解决高并发下I/O瓶颈的问题&#xff0c;提升系统的性能。当然&#xff0c;实际场景中的优化可能涉及到更多的细节和技术&#xff0c;但希望这篇文章能为大家提供一些思路和方法。​ 引言 大家好&#xff0c;我是小米&#xff01;今天我们来聊一个在高并发场景…

【Netty技术专题】「原理分析系列」Netty强大特性之Native transports扩展开发实战

Netty强大特性之Native transports技术原理分析 背景介绍JNI概念介绍不同平台的JNI实现 使用Native transports库Maven的分类器&#xff08;Classifier&#xff09;使用Linux native transport使用MacOS/BSD native transport库构建native transport库Linux版本要求MacOS/BSD版…

制度下降算法c语言

#include<stdio.h> #include<string.h> int location0; //遍历字符串的当前位置 char arr[20]"idid*id#"; void error(); //错误提示函数 /* 每一个非终结符都构造一个函数 */ void E(char t); void Ep(char t); void T(char t); void Tp(char t);…

Python 线性回归可视化 并将回归函数放置到图像上

import matplotlib.pyplot as plt import scipy import seaborn as sns# 加载内置的数据集 df sns.load_dataset(tips)#create regplot p sns.regplot(xtotal_bill, ytip, datadf)#calculate slope and intercept of regression equation slope, intercept, r, p, sterr sci…

基于BatchNorm的模型剪枝【详解+代码】

文章目录 1、BatchNorm&#xff08;BN&#xff09;2、L1与L2正则化2.1 L1与L2的导数及其应用2.2 论文核心点 3、模型剪枝的流程 ICCV经典论文&#xff0c;通俗易懂&#xff01;论文题目&#xff1a;Learning Efficient Convolutional Networks through Network Slimming卷积后能…

《动手学深度学习(PyTorch版)》笔记7.6

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过&…

CC工具箱使用指南:【获取字段的所有唯一值】

一、简介 这个工具的目的是获取选定要素图层的字段的所有唯一值。 一般就是用于查看&#xff0c;比如说看一下规划用地有多少种地类&#xff0c;都是哪些地类。 二、工具参数介绍 点击【信息获取】组里的【获取字段的所有唯一值】工具&#xff1a; 即可打开下面的工具框界面…

Codeforces Round 923 (Div. 3)E. Klever Permutation 找规律,有共同区间

Problem - E - Codeforces 目录 Source of idea: 思路&#xff1a; 代码&#xff1a; 另一个up的找规律的解法&#xff1a; Source of idea: Codeforces Round 923(A-F题解) - 哔哩哔哩 (bilibili.com) 思路&#xff1a; 上面up分析的很好。两个相邻区间也就端点不一样&…