IE8–IE11中<picture>和srcset被完全忽略，需在<picture>内末尾放置兜底<img src="fallback.jpg">，并用picturefill等JS库实现响应式图像兼容。
IE8–IE11 里 <picture> 和 srcset 直接被忽略怎么办
IE11 及以下、Android 4.3 以前的 WebView 完全不解析 <picture> 标签，会跳过整个结构，只渲染内部最后一个 <img>（如果有），否则留白。这不是加载慢，是解析器压根不认识这些标签。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 永远把兜底
<img src="fallback.jpg">放在<picture>最内层末尾，不能只靠src属性“撑场子” - 别指望
sizes或srcset在旧环境生效——它们会被静默丢弃；需要响应式图像时，改用 JS 库如picturefill（v3 支持 IE8+） - 若只用
<img srcset="...">，IE 会退化为加载src，所以务必保留src属性，且指向可用图（如 CDN 托管的占位图）
background-position-x 在 IE7 失效怎么写才稳
CSS 背景图定位比 inline 图像更可控，尤其适合图标、装饰图等无需语义化的场景。但写法有坑：IE7 不支持 background-position-x / background-position-y 拆分属性，哪怕 IE8 支持，IE7 也会失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用合并写法：
background-position: 20px 10px或background-position: right top，IE7+ 全支持 - 避免
calc()计算偏移值（如background-position: calc(50% + 10px) top），IE8–IE9 完全不识别 - 若需响应式偏移，优先用媒体查询覆盖，比绑定
window.resize更轻量，也避开了 IE8– 中getBoundingClientRect()返回null的问题
<img> 在 IE6–IE8 渲染出 3px 间隙和蓝边怎么清
IE 低版本对 <img> 的默认行内行为处理异常，导致父容器被撑高、相邻图片间出现空隙、链接包裹时自带蓝边等问题——和语义无关，纯盒模型缺陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
display: block或vertical-align: top解决 3px 间隙（本质是行内元素 baseline 对齐引发的下缘留白） - 带
<a>的图片在 IE6–IE8 默认有蓝色边框，必须显式写img { border: none; }，仅border: 0有时不生效 - 多个图片横排时出现间隙，除了浮动，也可把 HTML 中的换行符删掉（即所有
<img>写在同一行）
src 必须指向静态高可用资源，否则降级链就断了
80% 的“图片白屏”问题，根源是 src 本身为空、写错、或指向了断网即失效的动态地址（比如 /api/image?uid=123&format=webp）。浏览器不会因为 src 失效就自动切到 data-src 或 <source>——它只管发请求，失败了就停在那里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
src必须是静态、稳定、高可用的 URL：推荐用 CDN 托管的占位图（如/img/placeholder.svg）或业务默认图（如/img/avatar-default.png） - 绝对禁止
src=""、src="broken.jpg"（且该文件实际不存在）、src="./images/xxx.jpg"（本地开发能跑，部署后因路由重写失效） - SSR 渲染时，
src值必须由服务端直接写出，不能依赖客户端 JS 注入——否则断网时连占位图都出不来
src 永远可加载。一旦这个基础失守，后续任何 onerror、<picture>、data-src 都无从触发。 
