angualr版本升级16后,angualr项目打包后会把
left: 0;
top: 0;
right: 0;
bottom: 0;
转换为inset:0, safir14.5以下的浏览器识别不了inset:0这个样式导致css样式失效。页面出现问题。
后面我特地学习了inset属性。
inset 是一个相对新的 CSS 属性,用于设置元素的上、右、下、左的位置。它可以同时设置四个方向的位置,而不需要分别使用 top、right、bottom 和 left 属性。这种同时设置四个方向位置的方式更加简洁和语义化。
inset 属性是 top、right、bottom 和 left 属性的组合,其语法如下:
selector { inset: <top> <right> <bottom> <left>; }
其中,<top>、<right>、<bottom> 和 <left> 分别表示元素距离容器顶部、右侧、底部和左侧的距离,可以是长度值(如 px、em 等)、百分比(相对于父元素的尺寸)、auto(由浏览器决定)等。
例如,如果要将一个元素相对于其包含块定位在左上角(top: 0; left: 0;),可以使用 inset 属性:
selector { inset: 0 0 auto auto; }
当 left 和 top 值都为 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