旧浏览器中响应式布局失效，是因为ie9及以下版本完全忽略@media规则，静默跳过媒体查询，仅渲染默认样式；ie8连cssom都不解析，需用条件注释或respond.js等方案降级处理。
旧浏览器里响应式布局直接失效，不是代码写错了，而是它根本没解析媒体查询
现代 CSS 媒体查询（如 @media (max-width: 768px)）在 IE9 及以下版本中被完全忽略——不是报错，是静默跳过。你写的断点样式不会生效，浏览器只渲染未包裹的默认规则。这意味着：你在 Chrome 里调好的「小屏堆叠」布局，在 IE8 里可能还是横排三栏+溢出滚动条。
关键判断点：window.matchMedia 在 IE9–IE11 中返回 undefined；IE8 及以下连 @media 规则都进不了 CSSOM。别指望 JS 检测后动态加类——那时 DOM 已渲染完毕，样式早已错乱。
- 用 W3C Validator 检查 HTML 结构是否合法：非法嵌套（比如
<p></p>里放<div>）会让 IE 更早放弃解析 CSS <li>把核心响应式逻辑拆出来，单独写一份「降级版」CSS 放在 <code><style></style>标签末尾，不依赖媒体查询，仅靠 class 控制（如.layout-mobile） - 禁用
rem或vw单位：IE9 不支持calc()里的vw，rem在 IE8 需要 polyfill 且易与 font-size 级联冲突，改用em或像素值更稳 - HTML 中保持
<main></main>在前、<aside></aside>在后，避免用order或负margin强行调序 - 小屏下（
@media (max-width: 768px)）移除所有float，设main, aside { width: 100%; margin-top: 1.5rem; }，让aside自然沉底 - 绝对禁止
display: none隐藏aside：读屏器会跳过，法律声明、版权信息就等于被删了 - 如果必须保留侧栏语义（如
<aside role="complementary"></aside>），就在 JS 检测到旧浏览器后，手动插入aria-labelledby指向主标题，补足可访问性 - 检查 Network 面板：如果
<img src="fallback.jpg">请求失败（状态码 404），整个图片区域就是空的——IE 不会尝试 fallback 到其他 source -
sizes必须含单位：sizes="(max-width: 768px) 100vw, 33vw"✅，sizes="100%"❌（IE 无视，但现代浏览器也无效） - 服务器返回
Content-Type: image/webp才能匹配type="image/webp"；Nginx 配置漏了types { image/webp webp; }就算标签全对也白搭 - 兜底
<img>的src必须可用，且建议用 JPEG 或 PNG，别用 WebP——IE 连解码都不支持 - float 回退方案必须独立于 JS：所有样式规则写死在 CSS 文件里，用媒体查询或条件注释（
<!--[if lt IE 9]>...<![endif]-->）分发 - 测试时禁用 DevTools 的 Network → Disable cache + Disable JavaScript，再刷新——这才是真实内网环境
- 最易被忽略的一点：IE 下
<main></main>等语义化标签默认无样式，需显式重置main { display: block; }，否则高度塌陷、背景不显示
Flexbox 回退到 float 时，main 和 aside 错位怎么修
用 display: flex 实现主侧栏，在 IE10–IE11 要切回 float，但直接加 float: left 会导致 main 宽度计算错误、文字换行异常、清浮动失效——尤其当 aside 写在 main 前面时。
真实问题不在 CSS，而在 DOM 顺序和视觉顺序必须一致：IE 下键盘 Tab 焦点会先落到 aside，而用户预期是先读主内容。所以不能简单隐藏或移位。
<picture></picture> 在 IE 中只加载 <img> 兜底图，怎么确认是不是语法坑
IE 全系不识别 <picture></picture> 和 <source></source>，所以它只会管最后那个 <img src="...">。但很多人以为“写了兜底就万事大吉”，结果发现图片模糊、带宽爆炸、甚至空白——其实是 <img> 的 src 本身写错了，或者路径 404，而 IE 不报任何提示。
最常踩的三个坑：media 属性漏括号、sizes 值单位缺失、type 与服务器返回的 Content-Type 大小写不一致。
为什么还在花时间修 float 兼容，而不是直接上 Polyfill
因为某些政府、银行内网系统仍在跑 IE11，且策略禁用 JavaScript 执行——whatwg-fetch、flexibility、甚至 html5shiv 全部失效。这时唯一能动的只有原生 HTML + CSS，没有 JS 干预空间。
这不是为了兼容“老用户”，而是为了满足合规底线：页面必须在无 JS 环境下可读、可导航、可提交表单。Polyfill 解决的是功能缺失，但布局错乱是结构级失效，JS 来不及救。
