safari 与 chrome 渲染差异主因是 webkit 对 flex/gap/height 百分比等特性的解析更严格：flex:1 在旧 safari 中需配合 flex-basis:0px 和 min-height:0；height:100% 在 safari 14–15.6 失效，须显式设父容器高度；border:transparent 会丢失热区，应改用 rgba(0,0,0,0.001)；@supports 需正确使用且不能覆盖底层渲染缺陷。
Chrome 中样式正常、Safari 中错位，大概率不是你漏写了某条规则，而是 Safari 对 flex/gap/height 百分比等特性的解析逻辑和 Blink 不同——它没“错”，只是更严格地执行了旧草案或加了额外限制。
flex: 1 在 Safari 9–12 中子项高度坍缩
旧 WebKit 把 flex: 1 解析成 flex-basis: auto，而不是标准的 flex-basis: 0，导致子项不拉伸、内容撑开后换行或错位。
- 所有参与分配的子元素必须同时加
flex-basis: 0px和min-height: 0（垂直布局则用min-width: 0） - 别写
flex-basis: 0%—— Safari 直接忽略 - 子项含
<img>时，额外加height: auto，否则 Safari 可能冻结其内在尺寸估算 - 嵌套 Flex 容器（如卡片内再套
display: flex; flex-direction: column）时，每一层都要重复这套组合
height: 100% 在 Safari 14–15.6 中完全失效
Safari 14–15.6 不把 display: flex 父容器识别为百分比高度的有效参照物，哪怕父容器写了 height: 100vh，子项的 height: 100% 仍退化为 auto。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须给 Flex 父容器显式设
height（不是min-height，也不能靠flex: 1推导） - 更稳妥解法：删掉子元素的
height: 100%，改用flex: 1，但前提是父容器本身有确定高度（如height: 400px或min-height: 100dvh） - 若父容器是
flex-direction: column，别写height: 60%，改用flex: 0 0 60% - 检查
html和body：它们默认无高度，height: 100%在它们上无效，需显式声明height: 100%
border: 1px solid transparent 导致 Safari 边框热区丢失
transparent 在 Safari 中不是“透明色”，而是“不绘制”，会丢掉边框热区、截断 drop-shadow、让 backdrop-filter 不触发。
- 换成
border: 1px solid rgba(0, 0, 0, 0.001)，实测最小有效 alpha 值，视觉无差别但行为正常 -
rgba(0, 0, 0, 0)和transparent在 Safari 中表现一致，都不可靠，别用 - 这个问题常被误判为“颜色不一致”，实际和色域无关，需单独排查
@supports 不是万能的，但必须用对地方
用 @supports 降级比 JS 检测更可靠，但它不能解决底层渲染差异。比如 @supports (position: sticky) 能启用粘性定位，但 Safari 中 sticky 失效往往是因为祖先节点有 transform 或 overflow: hidden，这得手动清理。
- 检测
color(srgb)要用@supports (color: color(srgb 0 0 0))，别用@supports (color: color(display-p3)) -
@supports (display: grid)包裹 Grid 代码，并为旧 Safari 提供display: flex回退 - 别在
@supports里混写已废弃前缀（如display: -webkit-flex），现代 Safari 会忽略甚至报错
真正麻烦的不是某一条规则写错，而是多个点叠加：比如一个用了 color(srgb) 的按钮，又带 backdrop-filter，还设了 border: 1px solid transparent —— Safari 会同时触发色彩空间映射、合成层陷阱和边框语义解析失败，结果就是错位+模糊+点击失灵。这类问题必须逐层隔离验证，不能只看最终表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
