资源加载失败（如CSS/JS未加载、字体未就绪）导致浏览器退化渲染而布局错位；需检查Network面板状态码（404/403/blocked:mixed-content），合理使用defer/async、integrity/crossorigin，等待document.readyState === 'complete'或load事件再操作DOM。

HTML文档结构本身没有问题，然而资源加载异常（例如CSS未成功加载、JS阻塞了解析过程、字体文件未就绪）会迫使浏览器以退化模式渲染页面，最终造成布局错位——这并非代码编写错误，而是浏览器在缺少信息时的“猜测”结果。

检查与

添加 integrity 后，校验失败会触发 error 事件，你可以捕获并执行 fallback：document.addEventListener('error', e => { if (e.target.matches('link[rel=stylesheet]')) loadFallbackCSS(); });

缺少 crossorigin 会导致字体、CDN JS/CSS 的错误无法上报，console.error 中看不到任何线索

真正难以调试的布局错位，往往就卡在资源链路的缝隙里：一个返回 404 的 CSS 文件、一个未加 defer 的 JS 脚本、一个被 CORS 拦截的字体——它们不会抛出语法错误，却会让 DOM 树与渲染树严重脱节。专注于 Network 面板中的状态码，比反复检查 HTML 嵌套要高效得多。