IE8及更早版本不识别HTML5新标签，需用document.createElement提前声明并配合display:block样式；html5shiv或手写脚本均可，后者更轻量可控；Flexbox仅IE10+部分支持，旧版可用inline-block、table-cell等模拟；data-*属性须用getAttribute/setAttribute兼容。
HTML5新标签在IE8及更早版本直接不识别怎么办
IE8及更早版本压根不认识 <header></header>、<nav></nav>、<section></section> 这些标签，解析时当普通未知元素，不设默认样式，也不进CSS选择器匹配流程——不是样式没生效，是根本“看不见”。
核心解法就一个：document.createElement 提前声明这些标签，让旧IE知道它们是合法元素。但不能只写一次，得在里尽早执行，且需配合CSS重置。
- 必须在所有CSS加载前运行，推荐放在
最顶部的<script></script>中 - 对每个新标签调用一次
document.createElement('article')，顺序无关，但别漏掉<main></main>（IE11以下也认不出） - 光声明不够，还得补默认display样式，比如
header, nav, section { display: block; }
用html5shiv还是自己手写兼容脚本
html5shiv 是经过大量实测的老方案，支持到IE6–IE9，但它只解决“识别+基础display”，不处理语义、ARIA或事件冒泡差异。如果你项目里只有几个页面、只兼容IE8+，其实手写三行更轻量、更可控。
手写要点：
立即学习“前端免费学习笔记（深入）”；
- 检测是否为旧IE：
if (document.createElement('header').nodeName === 'HEADER')不成立就说明需要降级 - 批量创建：用数组遍历
['article','section','nav','header','footer','aside','main']，逐个document.createElement - 避免重复执行：加个全局标记，比如
window._html5shim_inited = true，后续跳过
注意：html5shiv 的CDN链接如果被墙或加载失败，整个降级就失效；而内联脚本无网络依赖，更适合企业内网环境。
Flexbox布局在旧IE里完全不能用，但能抢救的部分有哪些
IE10开始支持带-ms-前缀的Flexbox（2012年草案），IE9及更早则彻底不支持。但很多“看起来像Flex”的需求，其实可以用display: inline-block + vertical-align 或浮动模拟，只是响应式断点和自动换行会丢。
- 横向等宽排列：用
display: inline-block替代flex: 1，配合font-size: 0消除间隙 - 垂直居中单行文本：
line-height = height或vertical-align: middle+ 父容器display: table-cell - 绝对定位模拟
justify-content: center：用left: 50%+transform: translateX(-50%)（IE9+支持）
别碰 flex-wrap 和 align-content —— IE10的-ms-flexbox也不支持换行，强行用只会错位。
data-* 属性和 dataset API 在旧浏览器怎么安全读写
IE11才原生支持 element.dataset，IE10及更早只能靠 getAttribute('data-xxx') 和 setAttribute('data-xxx', val) 手动处理。关键是命名转换规则：横线转驼峰（data-user-id → dataset.userId），但旧IE根本不认这个API。
- 读取统一用
el.getAttribute('data-toggle')，不要依赖dataset.toggle - 设置时也走
setAttribute，避免在IE8下报Object doesn't support property or method 'dataset' - 如果用了第三方库（如jQuery），确认它内部已封装兼容逻辑；否则自己封装一个
getData(el, key)工具函数
真正容易被忽略的是：IE8不支持data-属性的HTML解析高亮，但不影响运行时读写——只要属性名拼写正确，getAttribute 就能拿到，不用额外hack。
