根本原因是浏览器对CSS盒模型、vertical-align、行内替换元素基线对齐及display默认值解析不一致；img默认inline导致定位不稳定，显式设display:block或flex可解决八成跨内核位置差异。
图像 position 在 Chrome/Firefox/Safari 中表现不一致的根源
根本原因不是 HTML5 本身，而是各浏览器对 CSS 盒模型、vertical-align、行内替换元素基线对齐、以及 display 默认值的解析存在细微差异。尤其当 display）时，Firefox 会严格按规范将图片基线对齐到文本底线，而 Chrome 和 Safari 有时会“视觉补偿”导致位置偏高。
img 垂直居中失效？优先用 display: block 或 display: flex
行内图片的垂直定位是兼容性雷区，最直接的解法是脱离行内流：
-
display: block+margin: auto（水平居中）或配合position: relative手动微调 - 父容器设
display: flex，再用align-items: center和justify-content: center—— 现代浏览器支持良好，IE11 需加-webkit-前缀 - 避免依赖
vertical-align: middle单独使用，它只在行内/表格单元格生效，且不同内核对 “middle” 的参考线定义略有出入
使用 object-fit 时注意 Safari 旧版本和 Firefox 的缩放行为差异
object-fit: cover 或 contain 在处理响应式图像裁剪时很常用，但 Safari ≤ 14.1 对 object-fit 在 transform: scale() 叠加时可能触发重绘异常：
- 始终为
height和width（哪怕用auto），避免无约束下各内核自行推导尺寸 - 若需动画缩放，优先用
scale()配合will-change: transform，而非反复改width/height - Safari 下若出现边缘模糊，尝试加
image-rendering: -webkit-optimize-contrast
绝对定位图片在不同内核中偏移 1px？检查 top/left 是否带小数
Chrome 和 Firefox 对 sub-pixel 渲染策略不同：Chrome 常向下取整，Firefox 可能四舍五入，Safari 则倾向保留小数并抗锯齿。当你写 top: 50% + transform: translateY(-50%) 时，若父容器高度非偶数，计算结果可能是 23.5px，导致渲染错位：
立即学习“前端免费学习笔记（深入）”；
- 用
top: 50%+margin-top: -Xpx（X 为明确整数高度的一半）更可控 - 或统一用
inset（inset: 0+margin: auto）配合width/height固定值 - 调试时打开开发者工具的“渲染”面板，勾选 “Paint flashing”，观察重绘区域是否因 sub-pixel 触发意外绘制
display: inline 这个隐性前提——它让所有后续定位逻辑都建立在不稳定的行内基线之上。把这一步显式覆盖掉，能解决八成以上跨内核位置差异问题。 
