doctype必须顶格写，前面不能有空格或bom；ie6–11及旧版edge会因此进入怪异模式，导致盒模型错乱、float异常、scrolltop失效；vs code需设utf-8 without bom，删去doctype前所有字符。
DOCTYPE必须顶格写，前面不能有空格或BOM
这是所有兼容问题的起点。只要前面有任意字符（包括空格、换行、注释、UTF-8 BOM字节），IE6–11和旧版Edge就会强制进入怪异模式——盒模型错乱、<code>float行为异常、document.body.scrollTop读取失效，连调试都难定位根因。
实操建议：
- VS Code右下角确认文件编码是
UTF-8 without BOM（不是“UTF-8”） - 光标移到第一行最左，按←键确认无隐形字符
- 删掉
前所有内容，包括<code><!-->、PHP输出空白、甚至空行 - 别用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">这类旧声明，现代浏览器反而解析更分裂
IE8–IE11中HTML5语义标签需html5shiv + display:block
IE8及以下完全不识别<header>、<section>、<main>等标签，DOM里压根没有节点；IE9–11虽能创建元素，但默认当inline处理，不设display: block就会塌陷——样式写了也白写。
实操建议：
- 条件加载
html5shiv：<!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]--> - 必须补CSS规则：
main, section, article, aside, nav, header, footer { display: block; } - 别依赖
document.createElement('nav')手动注册——漏一个就崩一个，且不解决渲染问题 -
html5shiv只解决“存在性”，不解决“默认样式”，两者缺一不可
CSS避免直接用Flexbox/Grid，优先选float + inline-block
IE10才开始支持带-ms-前缀的Flexbox，IE11完全不支持Grid；用了display: grid或justify-content，IE里整条规则被忽略，布局直接消失，且无降级提示。
实操建议：
- 三列等宽导航栏稳妥写法：
.nav-item { display: inline-block; width: 33.33%; vertical-align: top; } - 注意
inline-block元素间换行符会生成空格间隙，可用font-size: 0在父容器上消除，再单独设子元素字体大小 - 用
float时务必清除浮动，推荐::after伪元素+clear: both，比overflow: hidden更可控 - 别用
gap、grid-template-columns、display: contents——IE全系不认，Firefox 63以下也不支持后者
JS必须检测API存在性，不能靠UA字符串判断
navigator.userAgent极易伪造或过时：某Android WebView声称是Chrome却缺失localStorage；新版Safari可能伪装成旧版绕过限制。硬写if (navigator.userAgent.includes('MSIE'))等于埋雷。
实操建议：
- 检测能力本身：
if ('IntersectionObserver' in window) { /* 原生 */ } else { /* 加polyfill */ } -
document.querySelector缺失时，用document.getElementById或document.getElementsByClassName替代，但注意后者返回HTMLCollection，不是数组，不能直接调forEach - 字符串
includes()、数组find()等方法，需全局打补丁或引入core-js对应模块 - Babel只转语法，不补API——
Array.prototype.forEach在IE8里不存在，转成ES5也没用
真正卡住人的从来不是“怎么写新功能”，而是“怎么让老环境不崩”。IE内网系统还在跑，而html5shiv没加display: block、DOCTYPE前多了一个空格、if ('fetch' in window)写成了if (navigator.appName === 'Microsoft Internet Explorer')——这些细节漏掉一个，上线后就是生产事故。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
