<!DOCTYPE html>启用标准模式，是兼容性最好的doctype；但IE6–8不识别HTML5语义标签，需用<div class="header">替代或通过html5shiv.js注册标签。
用 HTML5 doctype 但避免语义化标签
老旧浏览器（如 IE6–8）不识别 <header>、<nav>、<section> 等 HTML5 标签，直接渲染时可能忽略或样式错乱。必须用 <!DOCTYPE html> 启用标准模式——它反而是兼容性最好的 doctype，比 XHTML 或 HTML4 更稳定；但所有结构一律改用 <div class="header"> 这类写法，配合 class 做语义区分。
常见错误现象：document.createElement('nav') 在 IE8 及以下无效，导致 JS 动态插入的语义标签无法被 CSS 选中。解决方案是提前在页面加载前执行 document.createElement 注册所有要用的 HTML5 标签，或者直接引入 html5shiv.js（注意只在 IE
CSS 中避开 Flexbox 和 Grid，优先用 float + display:inline-block
IE10 才开始支持 Flexbox（且需 -ms- 前缀），IE11 不支持 Grid。想实现多栏布局，float 虽然需要清除浮动，但兼容性最广；display: inline-block 可避免浮动塌陷问题，但要注意元素间换行符会生成空格间隙，可用 font-size: 0 或注释掉换行来消除。
使用场景举例：三列等宽导航栏，在 IE7+ 中稳妥写法是：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.nav-item {
display: inline-block;
width: 33.33%;
vertical-align: top;
font-size: 14px; /* 恢复字体大小 */
}不要用 gap、justify-content 或 grid-template-columns，这些在 IE 中完全无效且无降级行为。
JavaScript 避开 ES6+ 语法，用 polyfill 补全 API 缺失
IE8 不支持 addEventListener、querySelector、Array.prototype.forEach 等现代 API。不能依赖 Babel 自动转译——它只处理语法，不补 API。必须手动判断环境并加载对应 polyfill。
- 用
if (document.addEventListener)判断再绑定事件，否则回退到attachEvent（注意this指向不同） -
document.querySelector缺失时，可用document.getElementById或getElementsByClassName替代，但后者返回的是HTMLCollection，不是数组，不能直接调用forEach - 字符串
includes()、数组find()等方法，需在全局补丁或引入core-js的特定模块
图片和表单控件的兼容细节不能省略
IE6 不支持 PNG 透明通道（显示灰底），必须用 GIF 或为 PNG 加上 IE6 专用滤镜（filter: progid:DXImageTransform.Microsoft.AlphaImageLoader）；IE7–8 对 <input type="email"> 等新类型只当普通文本框处理，但不会报错——关键是 CSS 选择器 input[type="email"] 在 IE7 中无效，得换用 class 控制样式。
容易踩的坑：
-
<button>在 IE 中默认提交表单，务必加type="button" -
placeholder属性在 IE9 及以下完全无效，需用 JS 模拟（监听focus/blur切换文字） - 背景图在 IE6–7 中不支持
background-size，若需缩放，得用filter或切图适配
真正难的不是写兼容代码，而是判断哪些地方“看起来一样”其实用户根本感知不到差异，哪些地方“稍微不一样”就会导致表单提交失败或点击无响应——这类边界往往藏在事件流、盒模型计算和 DOM 插入时机里。
