ie8及更早版本不识别html5标签，需用document.createelement提前注册并显式设置display:block；ie9–ie11虽识别标签，但在flex/grid布局中存在兼容性问题，需加前缀或降级处理。
IE8及更早版本根本不解析HTML5标签，display设置无效
不是CSS没写对，而是IE8及以下压根不把<section></section>、<header></header>当合法元素——DOM里查不到，CSS选择器根本匹配不上，section { display: block }这行代码等于白写。你看到的“内容没显示”，其实是浏览器把整个标签当透明文本处理了，连盒模型都不生成。
document.createElement必须在页面解析前执行
核心动作是让IE提前“认识”这些标签，否则后续任何样式都无从谈起。关键点有三个：
- 脚本必须放在
内，且在任何<section></section>等标签出现之前 - 要用
@cc_on条件编译包裹，只让IE执行：/*@cc_on!@*/0在非IE中为false，直接跳过 - 每个标签都得单独调用
document.createElement，不能靠CSS或HTML声明补救
典型写法：
<!--[if lt IE 9]>
<script>
(function() {
if (!/*@cc_on!@*/0) return;
var tags = 'abbr,article,aside,footer,header,nav,section'.split(',');
for (var i = 0; i < tags.length; i++) {
document.createElement(tags[i]);
}
})()
</script>
<![endif]-->
display: block要显式写全，且不能被重置
即使标签已被识别，IE仍默认按inline渲染（不像现代浏览器默认设为block）。所以必须手动声明：
- 至少覆盖
header、nav、section、article、aside、footer、main（<main></main>在IE中尤其容易漏） - 规则要写在全局CSS里，且位置不能太靠后——避免被Normalize.css或重置样式覆盖成
inline - 别只写
section { display: block }，用逗号分隔批量声明，减少遗漏
推荐CSS片段：
header, nav, section, article, aside, footer, main {
display: block;
}
IE9–IE11能识别标签但Flex/Grid下行为异常
这些版本虽支持<section></section>等标签，但display: flex容器里的子元素若为HTML5语义标签，可能塌陷或错位。这不是display: block没起作用，而是Flex布局兼容性差：
- IE10需加
-ms-前缀：display: -ms-flexbox - IE11对
flex: 1支持不稳定，建议改用flex: 1 1 auto - 如果父容器用了
display: grid，IE11完全不支持，必须降级为float或inline-block
真正麻烦的是混合场景：标签已注册、display: block已生效，但嵌套在Flex容器里却消失——这时该查的是容器的兼容写法，不是标签本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
