angular版本升级成16后css的踩坑

angualr版本升级16后,angualr项目打包后会把

left: 0;
top: 0;
right: 0;
bottom: 0;

转换为inset:0, safir14.5以下的浏览器识别不了inset:0这个样式导致css样式失效。页面出现问题。

后面我特地学习了inset属性。

inset 是一个相对新的 CSS 属性,用于设置元素的上、右、下、左的位置。它可以同时设置四个方向的位置,而不需要分别使用 toprightbottomleft 属性。这种同时设置四个方向位置的方式更加简洁和语义化。

inset 属性是 toprightbottomleft 属性的组合,其语法如下:

selector { inset: <top> <right> <bottom> <left>; }

其中,<top><right><bottom><left> 分别表示元素距离容器顶部、右侧、底部和左侧的距离,可以是长度值(如 pxem 等)、百分比(相对于父元素的尺寸)、auto(由浏览器决定)等。

例如,如果要将一个元素相对于其包含块定位在左上角(top: 0; left: 0;),可以使用 inset 属性:

selector { inset: 0 0 auto auto; }

lefttop 值都为 0 时,使用 inset 属性可以更简洁地表示为 inset: 0;

在某些情况下,使用 CSS 预处理器(如 Sass、Less 等)或者打包工具(如 webpack、Parcel 等)可能会将 top: 0; left: 0; 自动转换为 inset: 0;,这是因为 inset 属性的语义更清晰,代码更简洁,可以提高开发效率。

下面2个链接是inset的相关说明和对应的解决方案

https://developer.mozilla.org/zh-CN/docs/Web/CSS/inset

css - Prevent Chrome browser from converting position property to inset - Stack Overflow

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/809349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

社交网络的未来图景:探索Facebook的发展趋势

随着科技的不断进步和社会的快速变迁&#xff0c;社交网络作为连接人与人之间的重要纽带&#xff0c;扮演着日益重要的角色。而在众多社交网络中&#xff0c;Facebook作为老牌巨头&#xff0c;一直在探索着新的发展路径&#xff0c;引领着社交网络的未来图景。本文将深入探索Fa…

SQLite---调试提示(十九)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite Android 绑定&#xff08;十八&#xff09; 下一篇&#xff1a;从 SQLite 3.4.2 迁移到 3.5.0&#xff08;二十&#xff09; ​ 以下是 SQLite 开发人员跟踪、检查和了解 核心 SQLite 库。 这些技术旨在帮助理解 核…

open c UF_MODL_create_simple_hole 识别放置平面 UF_MODL_ask_face_data

在BLOCK上创建一个简单孔 UF_FEATURE_SIGN sign UF_NULLSIGN;double block_orig[3] { -25.0,-25.0,0.0 };char* block_len[3] { "50","50","30" };tag_t blk_obj;UF_MODL_create_block1(sign, block_orig, block_len, &blk_obj);tag_t bo…

ubuntu如何截图? ubuntu中截屏的三种方法

文章目录 1.ubuntu主要用途2.ubuntu如何截图&#xff1f;2.1 方法一&#xff1a;键盘按键快捷键截屏 2.2 方法二&#xff1a;系统自带软件2.3 方法三&#xff1a;第三方软件 Reference 1.ubuntu主要用途 1、桌面操作系统&#xff1a;Ubuntu可用作个人电脑或笔记本电脑的操作系…

certbot—30秒部署HTTPS,永久免费,自动续约;ssl证书

Certbot 是一个由 Let’s Encrypt 开发的免费开源工具&#xff0c;用于自动化部署和管理 SSL/TLS 证书。它具有以下几个显著的好处&#xff1a; 免费证书&#xff1a;Certbot 使用 Let’s Encrypt 作为其证书颁发机构&#xff0c;Let’s Encrypt 提供免费的 SSL/TLS 证书。这意…

Doris 内网安装部署,基于 CentOS 7

实测 CentOS 7.6 和 7.9都可用&#xff0c;CentOS安装包为&#xff1a;标准安装盘DVD版&#xff0c;如果系统安装的是精简版&#xff0c;需要挂载DVD版或者自行下载依赖。 参考文档 快速开始 - Apache Doris Doris 下载地址&#xff1a;2.1.1 ( Latest ) -> x64 ( avx2 )…

Axios与Fetch——请求相关知识回顾

一、Axios 1、常规使用 &#xff08;1&#xff09;.then 方式 axios.get("./js/covid-data.json ").then(res > {this.list res.dataconsole.log(this.list);}); &#xff08;2&#xff09;async 方式 async mounted() {await axios.get("./js/covid-d…

计算两个时间段的差值

计算两个时间段的差值 运行效果&#xff1a; 代码实现&#xff1a; #include<stdio.h>typedef struct {int h; // 时int m; // 分int s; // 秒 }Time;void fun(Time T[2], Time& diff) {int sum_s[2] { 0 }; for (int i 0; i < 1; i) { // 统一为秒数sum_s[…

上海计算机学会 2023年9月月赛 乙组T2 方格路径(二)(最短路)

第二题&#xff1a;T2方格路径&#xff08;二&#xff09; 标签&#xff1a;最短路题意&#xff1a;给定 n m n m nm的方格地图&#xff0c;每个点要么是空地 . . .&#xff0c;要么是障碍物 ∗ * ∗&#xff0c;求左上角到右下角&#xff0c;最少的移除障碍个数&#xff0c…

ZCC8703 60V升压型、降压型、升降压型LED恒流驱动器 替代SY8703

描述&#xff1a; ZCC8703是一种集成功率开关的多工作模式、宽输入/输出DC-DC LED驱动芯片&#xff0c;具有3V到60V的宽输入电压范围&#xff0c;集成了软启动&#xff0c;从而最大限度地减少对外部浪涌抑制组件的需求&#xff0c;使其成为宽输入电源范围LED驱动的理想选择。输…

string的使用

string的使用 string的声明与初始化 读入字符串可用getline(cin, s) cin >> s int main(){//声明并初始化一个空字符串string str1;//使用字符串字面量初始化字符串string str2 "Hello Word!";//使用另一个string对象来初始化字符串string str3 str2;//使…

git 删除本地分支 删除远程仓库中的分支

语法&#xff1a; 删除本地分支 git branch -D <分支名>删除远程分支 git push <remote名称> <分支名> --delete 示例&#xff1a; 删除本地分支 git branch -D feature/test_listview删除远程分支 git push origin feature/test_listview --delete 两个…

【考研数学】《660》+《880》高分搭配方法

&#x1f4dd;《660题》和《880题》高效刷题方法 1️⃣做题要有针对性&#xff0c;不要为了做题而做题 &#x1f4aa;660和880题虽然多&#xff0c;但是你不用全都做完&#xff0c;你可以把它当成是题源&#xff0c;里面的每一道题都很经典&#xff0c;如果搞懂一道&#xff…

Qlik Sense : Crosstable在数据加载脚本中使用交叉表

什么是Crosstable&#xff1f; 交叉表是常见的表格类型&#xff0c;特点是在两个标题数据正交列表之间显示值矩阵。如果要将数据关联到其他数据表格&#xff0c;交叉表通常不是最佳数据格式。 本主题介绍了如何逆透视交叉表&#xff0c;即&#xff0c;在数据加载脚本中使用 L…

设计模式: 行为型之责任链模式(14)

责任链模式概述 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为设计模式&#xff0c;它允许对象或对象集合以链式的方式组织在一起&#xff0c;以处理请求在责任链中&#xff0c;每个对象都包含对下一个对象的引用&#xff0c;并且都有机会处理…

WinRAR再爆0 day漏洞,0 day漏洞该如何有效预防

WinRAR再爆0 day漏洞&#xff0c;已被利用超过4个月。 Winrar是一款免费的主流压缩文件解压软件&#xff0c;支持绝大部分压缩文件格式的解压&#xff0c;全球用户量超过5亿。Group-IB研究人员在分析DarkMe恶意软件时发现WinRAR在处理ZIP文件格式时的一个漏洞&#xff0c;漏洞…

iptables/ebtables学习笔记

目录 一、前言 二、Netfilter 构成 三、Netfilter 转发框架 四、Netfilter 与 iptables 五、Netfilter 与 ebtables 一、前言 Netfilter 是 Linux 内核的数据包处理框架&#xff0c;由 Rusty Russell 于 1998 年开发&#xff0c; 旨在改进以前的 ipchains&#xff08;Lin…

实例解释遇到前端报错时如何排查问题

前端页面报错&#xff1a; 1、页面报错500&#xff0c;首先我们可以知道是服务端的问题&#xff0c;需要去看下服务端的报错信息&#xff1a; 2、首先我们查看下前端是否给后端传了id: 我们可以看到接口是把ID返回了&#xff0c;就需要再看下p_id是什么情况了。 3、我们再次请…

问题:Nand作为存储介质,读写出错

一、验证testchip的时候遇到的问题 格式化失败,经分析(协议分析仪上总线的数据),有两个原因:(1)Disk IO Cache层的实现有问题 (2)NAND存储介质的读写有问题。 二、LARK-FPGA遇到的问题 1. 问题1:无法格式化 格式化失败,无法格式化! 1.1 协议分析仪 Debug方法:PC端通…

计算机网络 虚拟局域网划分

一、实验内容 1、分别把交换机命名为SWA、SWB 2、划分虚拟局域网 valn &#xff0c;并将端口静态划分到 vlan 中 划分vlan 方法一&#xff1a;在全局模式下划分vlan&#xff0c;在SWA交换机上创建三个vlan&#xff0c;分别为vlan2&#xff0c;vlan3&#xff0c;vlan4。 方…