嘿，兄弟，我来帮你拆解下这个头疼的布局偏移问题！首先先打消你的疑虑：这和你用XHTML5完全没关系，浏览器对XHTML和HTML的布局计算逻辑在这个场景下是完全一致的，别往这个方向钻牛角尖啦。

咱们来捋清楚为啥加了img的宽高还是会偏移：你给#main-image img设了固定宽高，但别忘了你是用<picture>标签把img包起来的啊！默认情况下，<picture>容器本身是没有明确尺寸的，在图片资源加载完成前，它的高度是0——这就导致你的figcaption直接跑到了本该是图片的位置（窗口上方），等图片加载完，<picture>被撑开，自然就把下面的内容都挤下去了，这就是你看到的布局偏移。

那该怎么 fix 呢？给你几个实用的方案：

• 方案一：直接给<picture>也加上和img一致的尺寸样式，让它提前占位：

#main-image picture,
#main-image img {
  width: 1024px;
  height: 400px;
  display: block; /* 可选，避免inline元素的默认间距 */
}

• 方案二：用aspect-ratio属性更灵活地控制比例，不用硬写死宽高，适配性更好：

#main-image {
  aspect-ratio: 1024 / 400; /* 对应你的图片比例 */
  width: 1024px; /* 或者设成100%自适应容器，看你的布局需求 */
}
#main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 防止图片拉伸变形，可选 */
}

这个方法的好处是，哪怕你之后改了图片尺寸，只要更新aspect-ratio的值就行，不用改一堆样式。而且外层的figure容器会提前根据比例算出高度，figcaption从一开始就会待在图片下方的正确位置。

• 额外提醒：你用的picture+srcset是很好的现代图片方案，但浏览器在选择avif/webp资源的时候，哪怕速度再快，也需要一点时间，但只要我们提前给容器预留好空间，就不会出现布局跳动的问题了。

我之前在项目里也遇到过一模一样的情况，就是因为忽略了picture容器的尺寸设置，把这个补上之后，布局偏移立刻就消失了，你可以赶紧试试！

内容来源于stack exchange