Safari 14浏览器CSS样式错乱 Chrome下显示正常该如何解决？

• 启用Safari 14的开发菜单：进入Safari偏好设置 -> 高级，勾选「在菜单栏中显示开发菜单」，按下Command + Option + I打开元素审查面板。
• 找到样式错乱的对应DOM节点，查看样式面板中被灰色划掉的属性，这类属性就是当前Safari版本不支持的属性，优先排查这部分内容。
• 按优先级核对所用CSS属性的支持范围：优先检查布局类属性，其次检查特效类属性，最后核对CSS函数、自定义变量的语法兼容性。

针对NFT预览卡片类项目的常见不兼容问题，可优先排查以下几个点：

1. aspect-ratio属性兼容问题
   Safari 14完全不支持aspect-ratio属性，如果你用该属性控制卡片图片的宽高比，替换为传统padding百分比法实现固定比例：

/* 原写法 */
.nft-image {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* 兼容写法 */
.nft-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 对应1:1的宽高比 */
}
.nft-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. flex布局gap属性兼容问题
   Safari 14.0及更早版本不支持flex布局下的gap属性，如果你用该属性控制元素间距，替换为子元素margin+父元素负margin的方案：

/* 原写法 */
.info-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 兼容写法 */
.info-row {
  display: flex;
  align-items: center;
  margin: -6px;
}
.info-row > * {
  margin: 6px;
}

3. backdrop-filter属性兼容问题
   如果hover效果用到了backdrop-filter实现模糊遮罩，Safari 14需要添加-webkit-前缀才能生效：

.image-hover-overlay {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

4. CSS自定义属性兼容问题
   Safari 14对多层嵌套计算的CSS自定义属性支持度较差，避免在伪类、媒体查询中做多层变量嵌套计算，尽量简化变量赋值逻辑。

修改完成后在Safari 14隐私模式下刷新验证，避免本地缓存干扰修复效果。

内容的提问来源于stack exchange，提问作者halamh