Safari中图片垂直对齐错位需优先设display: block并用flex/margin控制；若保留inline，须清除line-height/font-size干扰；flex内img务必设align-self或vertical-align: top；srcset需配width/height属性防重排。
图片在Safari里垂直对齐错位，vertical-align 失效怎么办
因为 Safari 对 vertical-align 的计算逻辑更严格，尤其当图片是行内元素（默认 display: inline）且父容器有非标准行高、字体设置或存在隐藏空白字符时，vertical-align: middle 往往不生效。这不是 bug，是它按规范更“较真”了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先把图片设为
display: block，再用margin或flex控制对齐，彻底绕开行内对齐陷阱 - 如果必须保留
inline（比如图文混排），确保父容器没意外的line-height或font-size: 0—— Safari 会据此重新计算基线位置 - 避免用
vertical-align: middle对齐图片和文字：它对齐的是“行框中线”，不是元素中线；改用vertical-align: text-bottom或vertical-align: -2px手动微调更可靠
Safari 不认 object-fit 图片裁剪后的对齐参数
object-fit 本身在 Safari 9+ 支持良好，但搭配 object-position 时容易失效——尤其是当父容器没有明确宽高、或用了 display: flex + align-items 混用时，Safari 会忽略 object-position: center top 等值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片父容器加
width和height（哪怕用min-width/min-height），否则 Safari 可能跳过object-position计算 - 不要同时用
object-position和flex的align-items控制同一张图的位置，二者逻辑冲突，Safari 优先级判断不稳定 - 测试时直接在 Safari 开发者工具里勾选/取消
object-fit，看是否触发重绘异常；若闪动或错位，大概率是父容器尺寸未固化
Flex 布局中图片在 Safari 里莫名偏移几像素
这是 Safari 对 img 默认 vertical-align: baseline 的残留影响。即使父容器是 display: flex，只要图片没显式设 align-self 或 vertical-align，它仍会参与行内基线计算，导致和相邻文字或伪元素产生几像素错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有 flex 容器内的
img加align-self: flex-start或align-self: center，别依赖默认值 - 更彻底的写法：
img { vertical-align: top; }—— 这能清掉 baseline 基准，对 Safari 最友好 - 检查是否有
::before/::after伪元素在同个 flex 容器里，它们可能带默认content: ""和行内行为，干扰 Safari 的对齐计算
响应式图片用 srcset 后 Safari 对齐突然错乱
不是 srcset 本身的问题，而是 Safari 在切换分辨率图片时，会短暂以原始尺寸渲染占位，等新图加载完才重排。如果 CSS 依赖图片固有尺寸（比如 height: 100% 或 aspect-ratio 未设），就容易出现抖动或错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终给
img设width和height属性（HTML 属性，不是 CSS），Safari 会据此预留空间，避免重排 - 配合
aspect-ratio使用，但注意 Safari 15.4+ 才支持；老版本必须用padding-top百分比占位法兜底 - 慎用
loading="lazy"在首屏关键图上——Safari 的懒加载触发时机比 Chrome 更晚，易造成对齐延迟
最麻烦的其实是混合场景：flex + object-fit + srcset + 文字环绕。这种时候 Safari 几乎一定会挑一个环节“认真过头”。别指望一套 CSS 通吃，得一层层关掉变量去验证哪条规则被它卡住了。
