如何处理html5新标签的浏览器兼容-html教程-PHP中文网

ie8及更老浏览器需用html5shiv脚本声明html5新标签并配合css重置display: block，否则无法识别dom节点且样式失效；vue/react项目若支持ie8也必须同步加载html5shiv并确保其在框架初始化前执行。

如何处理html5新标签的浏览器兼容

IE8 及更老浏览器直接忽略 `<article></article>` 等新标签怎么办

HTML5 新标签（如 <header></header>、<nav></nav>、<section></section>）在 IE8 及更早版本里不是“不认识”，而是根本不会创建对应的 DOM 节点——CSS 选中不到，JS document.createElement 也不生效。

最直接的解法是用 document.createElement 提前“声明”这些标签：

document.createElement('header');
document.createElement('nav');
document.createElement('article');

但手动列太容易漏，所以实际项目都用 html5shiv（注意拼写是 shiv，不是 shim）这个轻量脚本。它只在 IE9 以下执行，自动补全所有语义化标签的 DOM 支持。

必须放在里，且要在任何 CSS 之前加载，否则样式可能不生效
CDN 地址推荐用 https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js（注意版本号别用错）
如果用了 webpack 或现代构建工具，别直接引入 JS 文件——要用 html5shiv 的 ES 模块封装版，或改用 react-html5shiv 类方案

`display: block` 在旧 IE 里对新标签无效？

即使 html5shiv 让标签能被识别，IE8 默认仍把 <section></section> 当成内联元素（类似 <span></span>），display: block 不起作用——这是 IE 的渲染 bug，不是 CSS 写错了。

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

解决方案很简单：在 CSS 开头加一行强制重置：

PC手机端通用的jQuery响应式幻灯片轮播特效

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供A

下载

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

这段代码不能省，也不能只写部分标签。常见坑：

用 Autoprefixer 不会帮你加这组规则——它只处理属性前缀，不补选择器
如果用了 CSS-in-JS（比如 styled-components），得手动在全局样式里注入这段，否则组件内定义的 display: block 会被 IE 忽略
某些 UI 库（如 Bootstrap 3）自带了这部分，但 Bootstrap 4+ 彻底放弃 IE8，不再包含

要不要用 `<div class="header"> 替代 <code><header></header>`？
纯兼容角度，用 `<div class="header"> 确实能绕过所有 HTML5 标签问题，但代价不小： <ul> <li>语义丢失：屏幕阅读器、搜索引擎、未来维护者都看不到结构意图</li> <li>样式冗余：每个自定义 class 都要单独写 <code>.header { display: block; }`，不如统一处理原生标签
JS 绑定变脆弱：原本用 `document.querySelector('header')`，现在得写 `document.querySelector('.header')`，容易和业务 class 冲突

真正该权衡的是支持范围——如果统计显示 IE8 占比低于 0.2%，那直接不兼容更省心；如果必须保，就老老实实用 `html5shiv` + 强制 `display: block`，别为了“少引一个 JS”退回到 div 堆砌。

Vue / React 项目里新标签还用管兼容吗

要看你是否启用 SSR（服务端渲染）或预渲染。客户端渲染时，Vue 和 React 都通过 innerHTML 或 DOM API 操作节点，IE8 下连 document.createElement('article') 都失败，整个应用可能白屏。

所以即使用了框架，只要目标用户含 IE8，就得做两件事：

在 HTML 模板的里同步加载 html5shiv（不能 defer，不能 async）
确保框架初始化前，DOM 已完成标签补全——比如 Vue 的 new Vue() 要放在 html5shiv 加载回调之后
检查框架 CLI（如 Vue CLI 3+）是否默认剔除了 html5shiv：它通常只保留到 IE9+，需手动在 public/index.html 补上

最容易被忽略的是：Webpack 的 html-webpack-plugin 生成的 HTML，可能把 html5shiv 插入到底部，导致样式错乱——必须手动挪到里。