老旧浏览器（IE8–IE11、Android 4.3前WebView）不解析、srcset等新特性，仅渲染末尾；必须提供带有效src和alt的兜底图，且以正确为前提。

老旧浏览器（IE8–IE11、Android 4.3 以前 WebView）对现代图片特性基本不识别，不是“加载慢”，而是解析器直接跳过 、srcset、type 属性——它们会被静默忽略，只留下末尾的 。适配的关键不是强行塞新语法，而是让老环境有确定性 fallback。

IE8–IE11 中 完全不生效怎么办

在 IE11 及以下版本中不会被解析为有效元素，整个结构被跳过，仅渲染其内部最后一个 标签（如果有），否则留空。这不是 bug，是规范未支持。

• 必须把兜底 放在 最内层末尾，且 src 和 alt 都不可省略
• 所有 必须带 type 属性（如 type="image/webp"），否则 Safari 等也会跳过——但 IE 根本不看这个，所以它只是“保现代”而非“帮老旧”
• 不要写 然后指望 IE 按媒体查询降级：IE 不解析 media，也不执行 type 判断，只认最后那个

srcset 单独写在 上，IE 怎么 fallback

IE8–IE11 完全忽略 srcset 和 sizes，但会正常加载 src 属性指向的图——这是唯一可靠入口。

• src 必须指向一个真实可访问的图（如 CDN 托管的 800w 主图或占位图），绝不能是空值、"#" 或错误路径
• srcset 可以保留，但仅用于现代浏览器；它的存在不影响 IE 行为，前提是 src 本身可用
• 不要混用 w 和 x 描述符（如 "a.jpg 400w, b.jpg 2x"），整条 srcset 会被浏览器丢弃，退化为只读 src
• 如果用 sizes，老浏览器也完全无视，所以无需为它做兼容处理；但现代浏览器依赖它选图，务必写准

用 CSS background-image 替代 更稳吗

对纯装饰性图（图标、Banner 背景等），background-image 在 IE6+ 就已稳定支持，比 inline 更可控，但写法有硬限制。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 用合并写法：background-position: 20px 10px 或 background-position: right top，IE7+ 全支持
• 禁用拆分属性：background-position-x / background-position-y 在 IE7 失效，IE8 才开始支持
• 避免 calc()：background-position: calc(50% + 10px) top 在 IE8–IE11 中完全不识别，改用固定像素或媒体查询覆盖
• 别依赖 background-size: cover 做响应式缩放——IE8 不支持，需 JS 补丁或换图策略

图片自身渲染异常怎么快速修复

IE6–IE8 对 的行内默认行为处理异常，导致父容器撑高、相邻图间出现 3px 间隙、链接包裹时自带蓝边等问题，和语义无关，纯盒模型缺陷。

• 加 display: block 或 vertical-align: top 解决 3px 下缘间隙（本质是 baseline 对齐留白）
• 显式写 img { border: none; }，仅 border: 0 在 IE6–IE8 中有时不生效
• 多个图横排时，避免依赖 white-space: nowrap 或负 margin，浮动或 flex（IE10+）更可靠
• 若用 ，确保 a img 也设 border: none，否则点击区域仍带蓝边

最常被忽略的一点：所有降级方案都依赖正确的 。没有它，IE 会自动进入兼容模式，连 background-position 合并写法都可能失效——这不是代码问题，是渲染引擎被强制切回 IE7 模拟器。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！