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

看似 bug 又非 bug 的一个 bug

最近的一个项目中,对于 CSS 的一些属性一些选择符可以大胆使用,然后很意外得撞上一个 iOS 中 Safari 的一个解析问题。

<Component style={{height: "calc(100vh - 46px)"}}>一个组件</Component>

这样的一段代码很简单,然而就是这样的一段简单的代码,在 iOS 中出现了让误以为不兼容 [style*='100vh - 46px'] 这个写法。

为什么说是误以为呢,因为当时有一个需要是要在移动端中去改变这个组件的高度,所以,我就想着,为什么不用属性选择符来快速实现呢,这样还可以不用去考虑写类名。于是我就写了这么一句 CSS。

[style*='100vh - 46px'] {height: calc(100vh - 100px) !important;
}

在 Chrome 里模拟移动端看看,嗯,很 OK 么,高度改变了。

然而也就只是高兴了一下,就在 iOS 中发现高度并没有改变。十分好奇,通过数据线接上手机,打开 Safari,进入开发者菜单找到 iPhone 选项,开始调试 iPhone 上的打开的这个页面。

image.png

⇧⌘C,开始选择元素,然后在 iPhone 上点一下那个组件元素,快速定位到对应的元素上。然后在 DOM 中发现了一个很神奇现象。原本应该是 100vh - 46px 的属性值,变成了 -46px + 100vh 了。所以也就是为什么我的 CSS 没有作用的原因了。

image.png

就因为这个原因,我刚开始都怀疑是不是 *= 这个属性选择符的规则还存在兼容问题,或者是中间的 - 减号需要转义之类的。没想到啊没想到,居然还会有这样的一个情况出现。

最后为了考虑两者兼容,于是只好暂时委曲求全一下,写成这样了。

[style*='100vh - 46px'],
[style*='-46px + 100vh'] {height: calc(100vh - 100px) !important;
}

现在想想啊,还不如直接写一个 className 来的实在,何必折腾呢。但不折腾一下,自己也不知道居然还会有这样一个情况存在。

技术前沿拓展

前端开发,你的认知不能仅局限于技术内,需要发散思维了解技术圈的前沿知识。细心的人会发现,开发内部工具的过程中,大量的页面、场景、组件等在不断重复,这种重复造轮子的工作,浪费工程师的大量时间。

介绍一款程序员都应该知道的软件JNPF,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类,方便扩展;集成了代码生成器,支持前后端业务代码生成,实现快速开发,提升工作效率;框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用;后端框架支持 Vue2、Vue3。如果你有闲暇时间,可以做个知识拓展。

看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

相关文章:

看似 bug 又非 bug 的一个 bug

最近的一个项目中&#xff0c;对于 CSS 的一些属性一些选择符可以大胆使用&#xff0c;然后很意外得撞上一个 iOS 中 Safari 的一个解析问题。 <Component style{{height: "calc(100vh - 46px)"}}>一个组件</Component> 这样的一段代码很简单&#xff…...

mysql常见问题

批量导入SQL 数据库结构 数据时&#xff0c;如果数据是批量插入的话会报错&#xff1a;2006 - MySQL server has gone away。 解决办法&#xff1a;找到你的 mysql 目录下的 my.ini 配置文件&#xff0c;加入以下代码 max_allowed_packet500M wait_timeout288000 interactiv…...

QT上位机开发(串口界面设计)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 如果上位机要和嵌入式设备进行打交道的话&#xff0c;那么串口可能就是我们遇到的第一个硬件设备。串口的物理接线很简单&#xff0c;基本上就是收…...

k8s之pod

1、pod&#xff1a;k8s中最小的资源管理组件&#xff0c;最小化运行容器化应用的资源管理对象 &#xff08;1&#xff09;pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合 &#xff08;2&#xff09;一个pod中运行一个容器是最常用的方式 &#xff…...

第二百四十三回 再分享一个Json工具

文章目录 1. 概念介绍2. 分析与比较2.1 分析问题2.2 比较差异 3. 使用方法4. 内容总结 我们在上一章回中介绍了"分享三个使用TextField的细节"相关的内容&#xff0c;本章回中将再 分享一个Json插件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我…...

electron自定义菜单

创建menu.js const { app, Menu } require("electron"); const createMenu () > {const menu [{label: "菜单",submenu: [{label: "新增",click: () > {},}, ],},{label: "关于",submenu: [{label: "新增",click:…...

变量和函数提升(js的问题)

• js解释执行 • 变量和函数提升 变量声明提前&#xff0c;函数声明提前 • 变量声明提前&#xff1a;值停留在本地 • 函数声明提前&#xff1a;整个函数体提前 如果是var赋值声明的函数&#xff0c;变量提前&#xff0c;函数体停留在本地 1、变量提…...

Excel 插件:ASAP Utilities Crack

ASAP Utilities是一款功能强大的 Excel 插件&#xff0c;填补了 Excel 的空白。在过去的 20 年里&#xff0c;我们的加载项已经发展成为世界上最受欢迎的 Microsoft Excel 加载项之一。 ASAP Utilities 中的功能数量&#xff08;300 多个&#xff09;可能看起来有点令人眼花缭乱…...

hyperf 十九 数据库 二 模型

教程&#xff1a;Hyperf 一、命令行 symfony/console-CSDN博客 hypery 十一、命令行-CSDN博客 hyperf console 执行-CSDN博客 根据之前应该能了解到命令行的基本实现&#xff0c;和hyperf中命令行的定义。 1.1 命令初始化 hyperf.php中系统初始化中通过ApplicationFacto…...

使用python快速开发与PDF文档对话的Gemini聊天机器人

检索增强生成(Retrieval-augmented generation&#xff0c;RAG)使得我们可以让大型语言模型(LLMs)访问外部知识库数据(如pdf,word、text等)&#xff0c;从而让人们可以更加方便的通过LLM来学习外部数据的知识。今天我们将利用之前学习到的RAG方法&#xff0c;谷歌Gemini模型和l…...

Spring Cloud Gateway集成Knife4j

1、前提 网关路由能够正常工作。 案例 基于 Spring Cloud Gateway Nacos 实现动态路由拓展的参考地址&#xff1a;Spring Cloud Gateway Nacos 实现动态路由 详细官网案例&#xff1a;https://doc.xiaominfo.com/docs/middleware-sources/spring-cloud-gateway/spring-gatewa…...

Hive10_窗口函数

窗口函数&#xff08;开窗函数&#xff09; 1 相关函数说明 普通的聚合函数聚合的行集是组,开窗函数聚合的行集是窗口。因此,普通的聚合函数每组(Group by)只返回一个值&#xff0c;而开窗函数则可为窗口中的每行都返回一个值。简单理解&#xff0c;就是对查询的结果多出一列…...

ipvsadm命令详解

ipvsadm命令详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨一个在Linux系统网络管理中极具威力的命令——ipvsadm&#xff0c;通过详细解析…...

zabbix通过自动发现-配置监控项、触发器(小白教程)

自动发现配置参考链接&#xff08;不小白&#xff0c;不友好&#xff09; zabbix-get介绍 1配置 zabbix server&#xff1a;版本7&#xff08;不影响&#xff09;,IP地址&#xff1a;192.168.0.60zabbix agent&#xff1a;版本agent1&#xff08;不影响&#xff09;&#xff…...

Dockerfile文件介绍

0 Preface/Foreword 0.1 Docker docker用来自制镜像。 1 Introduction 1.1 Dockerfile Dockerfile是用于定义Docker镜像的构建过程&#xff0c;它包含一系列的指令用于安装 软件包、配置环境等操作。 Dockerfile文件的格式如下&#xff1a; FROM base_image RUN apt-get up…...

【PHP】函数array_reduce()使用场景

目录 1.计算数组中所有元素的和 2.计算数组中所有元素的乘积 3.将多个字符串连接在一起 4.对数组中的元素进行逻辑计算 5.取出第一个满足条件的数组&#xff0c;筛选有用数组 6.array_reduce()函数的基本语法&#xff1a; array_reduce 函数通常用于对数组中的元素进行累…...

软件测试基础理论学习-软件测试方法论

软件测试方法论 软件测试的方法应该建立在不同的软件测试类型上&#xff0c;不同的测试类型会存在不同的方法。本文以软件测试中常见的黑盒测试为例&#xff0c;简述常见软件测试方法。 黑盒测试用例设计方法包括等价类划分法、边界值分析法、因果图法、判定表驱动法、正交试…...

Unity 关于点击不同物品移动并触发不同事件

关于点击不同物品触发不同事件 可以实现在界面中点击不同的物体&#xff0c;移动到物品附近位置&#xff0c;然后触发对应的事件。 首先建立一个公共管理的类&#xff1a; public class InteractionObject : MonoBehaviour {private NavMeshAgent PlayerAgent;private bool …...

c++IO库详细介绍

文章目录 前言c IO 类简介1. iostream库iostream 类标准IO对象 2. fstream库fstream 类 3. stringstream库stringstream 类 格式化和控制错误处理 IO对象无拷贝或赋值IO条件状态主要的状态标志检查流状态控制流状态示例 管理输出缓冲主要操作示例 文件输入输出使用文件流对象示…...

海外静态IP和动态IP有什么区别?推荐哪种?

什么是静态ip、动态ip&#xff0c;二者有什么区别&#xff1f;哪种好&#xff1f;关于这个问题&#xff0c;不难发现&#xff0c;在知道、知乎上面的解释有很多&#xff0c;但据小编的发现&#xff0c;这些回答都是关于静态ip和动态ip的专业术语解释&#xff0c;普通非专业人事…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...