html5中新增标签的兼容性如何设置

老浏览器不显示html5新标签需用document.createelement()声明并补display:block样式，或引入html5shiv；必须在head中尽早执行且确保doctype正确。

HTML5 新增标签在老浏览器里直接不显示怎么办

多数老版本 IE（尤其是 IE8 及以下）压根不认识 <header></header>、<nav></nav>、<section></section> 这类语义化标签，会当成未知元素忽略渲染，连默认样式都不给，结果就是内容“消失”或排版错乱。

核心解法是让老浏览器知道这些标签是合法的块级元素——不是靠 CSS 伪装，而是靠 js 提前声明。最轻量、最稳妥的做法是用 document.createElement() 主动创建一遍：

if (!document.createElement('header').canHaveChildren) {   ['header', 'nav', 'section', 'article', 'aside', 'footer', 'main', 'figure', 'figcaption'].forEach(function(tag) {     document.createElement(tag);   }); }

这段代码必须放在 里、任何 CSS 或其他脚本之前执行。如果用 jquery，别等 $(document).ready()，它太晚了——dom 解析时标签已被忽略，补救无效。

IE8 及以下需要额外加 CSS 才能显示

光调用 document.createElement() 不够。IE8 默认把未知标签当 inline 元素处理，即使你声明了，它也不会自动设为 display: block。必须显式补上：

立即学习“前端免费学习笔记（深入）”；

header, nav, section, article, aside, footer, main, figure, figcaption {   display: block; }

注意：不能只写 display: block 而不指定选择器，否则老 IE 会整个忽略这条规则（CSS 解析失败）。所有新增语义标签都要列全，漏一个就可能白忙。

常见错误：用通配符 * { display: block; } ——这会破坏所有内联元素（比如 <span></span>、<a></a>），导致链接变块级、换行错乱。

要不要用 html5shiv？它和手写方案有啥区别

html5shiv 就是把上面两步打包封装的脚本，本质一样，但做了更细的兼容处理（比如修复 IE6–8 的打印样式、innerHTML 支持等）。如果你项目里已经用了，没问题；但如果只是支持 IE9+，其实完全不需要——IE9 开始原生支持这些标签，且默认 display: block。

使用要点：

• 必须通过 <script></script> 标签引入，且仅在 IE 条件注释中加载：<!--[if lt IE 9]><script src="html5shiv.min.js"></script><![endif]-->
• 不要用 CDN 引入（如 cdnjs 上的版本），部分老 IE 对跨域 script 的 MIME 类型校验严格，容易报 SEC7113: https security is compromised
• 现代构建流程（webpack/Vite）里，别把它打进主包——它只对老 IE 有用，白占体积

移动端和现代桌面浏览器根本不用操心

chrome 4+、firefox 4+、safari 5+、edge 12+、ios Safari 4.2+、android Browser 2.2+ 全都原生支持 HTML5 语义标签，无需任何 polyfill 或 hack。所谓“兼容性设置”，实际只针对 IE6–8 这个已淘汰但偶有遗留需求的窄窗口。

真正容易被忽略的是：即使你加了 html5shiv，如果页面没声明 ，IE 会进 Quirks Mode，此时 <code>html5shiv 完全失效——它依赖 Standards Mode 下的 DOM 行为。所以检查的第一件事永远是 DOCTYPE 是否正确、是否在第一行、前面有没有空格或 bom。