IE8及更早版本不识别等新标签，需用document.createElement创建并配合CSS声明display:block；html5shiv仅解决元素创建和样式化，不修复API、CSS3选择器或事件行为。
IE8 及更早版本不识别 <article></article> 等新标签怎么办
直接上 document.createElement 是最轻量、最可控的解法。IE8 不是“不认识语义标签”，而是压根没把它们当 HTML 元素注册进 DOM，所以连基本样式（比如 display: block）都不生效。
实操建议：
- 在
中或 JS 加载早期执行document.createElement('article')、document.createElement('section')等所有用到的新标签 - 必须配合 CSS 显式声明
article, section, nav, header, footer { display: block; }，否则即使创建了元素，IE8 仍按 inline 渲染 - 不要依赖第三方库（如 html5shiv）的自动检测逻辑——它内部做的其实就是上面两步，但多一层加载和执行时机风险
- 若项目已用 Webpack 或构建工具，可将这些
createElement调用打包进入口 JS 最顶部，确保早于任何模板渲染
html5shiv 的兼容边界在哪
html5shiv 只解决“元素可创建、可样式化”这一层，不处理新 API（如 localStorage、history.pushState）、不修复 CSS3 选择器（如 section:nth-of-type(2) 在 IE8 下仍无效），也不补全事件行为（比如 <video></video> 标签在 IE8 里创建出来，但不能播放）。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用了
html5shiv，但document.querySelector('nav > ul')在 IE8 报错：因为 IE8 原生不支持querySelector，跟标签是否认识无关 -
<time datetime="2020-01-01">Jan</time>能渲染，但time.dateTime属性读不到值：IE8 不实现该属性的 DOM 接口 - 在 IE8 控制台输入
typeof HTMLArticleElement返回"undefined"：说明原型链未补全，别指望用instanceof判断
要不要给新标签加 class 来规避兼容问题
要，但不是为了“让 IE 认识标签”，而是为了绕过渲染和选择器限制。IE8 的 CSS 引擎对未知标签名的选择器支持极差，article p 很可能完全不匹配，但 .article p 稳定得多。
使用场景与建议：
- 所有新语义标签都加语义化 class：
<article class="article"></article>、<nav class="nav"></nav>，CSS 写.article { margin-bottom: 1rem; } - 避免混合写法（如只给部分
<section></section>加 class），否则维护时容易漏掉样式规则 - 如果用 CSS-in-JS 或 scoped style（如 Vue 单文件组件），class 方案依然有效；而纯标签选择器在 IE8 下大概率失效
- 注意：加 class 不影响现代浏览器的语义性，
aria-role和辅助技术仍基于标签名识别
服务端渲染时怎么安全输出新标签
Node.js 或 PHP 输出 HTML 时，只要字符串里写了 <main></main>，IE8 就照样收着——它不拒绝未知标签，只是不理解。真正出问题的是前端 JS 操作这些标签时的 DOM 行为。
关键点：
- 服务端无需转义或替换新标签名（例如不用把
<aside></aside>改成<div class="aside">），那样反而破坏语义和 SEO <li>但若服务端生成的 HTML 被 IE8 的“怪异模式”解析（比如缺少 <code>），那连 <code>div都可能错乱，新标签更不可控——务必确认响应头Content-Type含charset=utf-8，且首行是标准 doctype - SSR 框架（如 Next.js、Nuxt）默认输出标准 HTML5，但若中间有代理或 CDN 重写 HTML，可能删掉 doctype 或插入 XML 声明，导致 IE 进入怪异模式
复杂点在于：兼容性不是单点问题，它横跨 HTML 解析、CSS 渲染、JS DOM API 三层。最容易被忽略的是——你以为修好了标签，其实只是把问题推到了下一层。
