HTML5图像位置偏移主因是CSS样式、盒模型或布局上下文变更，而非HTML5标准更新；常见诱因包括浏览器引擎升级、vertical-align默认值影响、Flex/Grid布局切换及图片加载时机变化。
HTML5 图像位置变化通常不是因为「HTML5 版本更新」本身导致的——HTML5 是一个不断演进的标准，浏览器不会因「HTML5 版本号」升级而突然改变 渲染行为。真正引起图像位置偏移的，几乎都是 CSS 样式、盒模型计算或布局上下文的隐性变更，比如浏览器引擎更新、默认样式调整、或你项目中某次构建/依赖升级间接影响了样式链。
为什么更新后
常见诱因包括：
- 浏览器升级（如 Chrome 120+ 对
display: inline元素的基线对齐策略更严格） - CSS 重置库（如 Normalize.css 或 modern-normalize）版本更新，修改了
img的默认vertical-align - 父容器从
block改为flex或grid，但未显式设置align-items/justify-content - 图片加载时机变化（如启用了
loading="lazy"后，占位高度丢失，触发回流重排） - 使用了
object-fit或image-rendering等新属性，但旧版浏览器忽略，新版开始生效
vertical-align 是最常被忽略的定位开关
默认是 inline 元素，会参与行内格式化上下文，其垂直对齐完全由 vertical-align 控制（默认值是 baseline）。一旦父容器有文字、line-height 变动，或周围有其他 inline 元素，位置就极易漂移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 明确设置
img { vertical-align: top; }或middle，避免依赖默认 baseline - 若需精准控制，优先将图片设为
display: block（彻底脱离行内流） - 检查是否在某个 CSS 层级里写了
img { vertical-align: text-bottom; }—— 这个值在新版 Chromium 中表现更“贴底”，可能比旧版多出 1–2px 偏移
Flex/Grid 布局下图像位置失效怎么办？
当父容器启用 display: flex，子 的 vertical-align 就完全失效了，此时位置由 align-items（交叉轴）和 justify-content（主轴）决定。
