17370845950

IE8无法识别HTML5新标签，因其解析器将未知标签视为inline元素且不创建可样式化DOM节点；须用html5shiv通过document.createElement()注册标签，并显式设置display:block等样式。

IE8 不支持 HTML5 新标签，

、

、 等会被当成未知元素，既不渲染为块级，也无法应用 CSS 样式——这不是“样式没写对”，而是 DOM 根本没识别它。

为什么 IE8 无法识别 HTML5 标签

IE8 及更早版本的解析器遇到未声明的标签时，会默认将其视为 inline 元素，并拒绝为其创建可样式化的 DOM 节点。这意味着即使你写了 header { display: block; }，浏览器也压根不认这个 header 是个合法标签，CSS 规则直接被忽略。

• 不是 CSS 优先级问题，是选择器根本匹配不到元素
• document.querySelector('header') 在 IE8 中返回 null
• 浮动、盒模型、伪类（如 header::before）全部失效

必须用 html5shiv（或等效脚本）动态创建标签

核心动作是让 IE8 “知道”这些标签存在，本质是调用 document.createElement() 提前注册它们。推荐使用标准 html5shiv，它已针对 IE6–8 做了深度适配。

• 不要用 CDN 上的 html5shim 拼写错误版本（注意是 shiv，不是 shim）
• 脚本必须放在 内、任何 CSS 和自定义 JS 之前
• 不支持通过 defer 或 async 加载，否则 DOM 创建时机错乱

CSS 必须显式声明 display: block

即使 html5shiv 成功注册了标签，IE8 仍默认按 inline 渲染。所有语义化标签需统一重置：

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

• 别只写 header，漏掉 main 或 figure 就可能在某处突然塌陷
• 避免用通配符如 * { display: block; }，会破坏表单控件、图片等原生行为
• 如果用了 box-sizing: border-box，记得也加到这些标签上，否则 IE8 下宽高计算异常

兼容性处理容易被忽略的细节

很多人加了 html5shiv 和 CSS 就以为万事大吉，但实际项目中常踩这几个坑：

• 条件注释