当alt为空时，Chrome、Firefox、Safari默认仅保留不可见空盒，不撑高导致布局塌陷；非空alt则渲染内联文字，但各浏览器样式不一致。
alt文本为空时，浏览器如何渲染破损图占位框
当 src 指向的图片 404 或路径错误，且 alt 为空（alt=""）时，Chrome、Firefox、Safari 默认只保留一个“看不见”的空盒——不显示文字，也不撑开高度。这会导致父容器突然塌陷、文字上移、布局跳动。
但如果你写了非空 alt（比如 alt="产品封面"），所有主流浏览器都会渲染一段内联文字，其行高、字体大小、垂直对齐方式由 CSS 中 img 的继承样式决定，容易和周围文字错位。
- Chrome 和 Edge：默认用 12px sans-serif 渲染 alt 文字，基线对齐方式与
img的vertical-align值强相关 - Safari：会把 alt 文字当作 inline 元素处理，若父容器有
line-height: 1，可能被截断 - 移动端 WebView（如微信内置）：部分版本会忽略
alt文字的换行控制，长文本挤成一坨
用 CSS 强制统一破损图占位行为
不能依赖浏览器默认表现，得主动控制。核心思路是：让破损图无论有没有 alt，都保持一致的尺寸和视觉反馈。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
img {
/* 确保即使加载失败也有可预测尺寸 */
min-width: 16px;
min-height: 16px;
/* 防止 alt 文字撑开容器或换行 */
font-size: 0;
}
img::after {
/* 只在图片加载失败时显示 fallback 提示 */
content: attr(alt);
font-size: 12px;
line-height: 1.2;
color: #999;
display: block;
text-align: center;
margin-top: 4px;
}
/* 关键：仅当图片真实失败才触发 ::after */
img:not([src])::after,
img[src=""]::after,
img[src*="data:"]:not([src^="data:image/"])::after {
content: "⚠ 图片未加载";
}
注意：::after 在 img 上生效需满足两个条件：img 是 replaced element 且设置了 display: inline（默认值），否则伪元素不渲染。
响应式图片中 srcset + alt 的兼容陷阱
使用 srcset 和 sizes 时，alt 本身不参与资源选择，但它会影响所有候选图源的无障碍语义。问题出在 fallback 行为上：
- 如果某张高清图（如
photo@2x.jpg）404，而低清图（photo.jpg）存在，浏览器仍会加载低清图，alt正常生效 - 但如果所有
srcset项都 404，最终 fallback 到src，而src也 404 —— 此时不同浏览器对alt的渲染差异最大 - 某些旧版 Android WebView 会直接忽略
alt，只留一个空白方块，且不触发onerror事件
稳妥做法是：始终确保 src 属性指向一张最小可用图（哪怕只有 1×1 像素的 GIF），再用 srcset 做增强。这样至少能保证 alt 有载体。
动态插入图片时漏设 alt 导致排版断裂
JS 创建 img 元素后，若只设 src 没设 alt，等于没写 alt 属性 —— 浏览器不会自动补空字符串，而是完全忽略无障碍语义，同时在破损时无任何 fallback 文字，造成视觉“消失”。
正确写法必须显式赋值：
const img = document.createElement('img');
img.src = '/assets/photo.jpg';
img.alt = '团队合影，五人在公司门口微笑'; // 不能省略
img.onerror = () => {
img.alt = '图片加载失败，请刷新重试';
};
React/Vue 等框架中同理：v-bind:alt="item.description || '暂无描述'"，避免 undefined 或 null 直接透传。
最易被忽略的是富文本编辑器导出的 HTML —— 它常把用户上传时没填的 “替代文本” 字段，生成为 alt="" 或干脆删掉该属性。上线前务必 grep 检查 <img[^>]*?src= 是否都带 alt=。
