html语义化标签在ie8及以下不被解析，ie9–11需设display: block，safari 14–15有flex子项min-width计算bug；真实ie用户为0时应彻底移除html5shiv和冗余兼容代码。
HTML语义化标签在IE8及以下完全不可用，IE9–IE11需手动加display: block才不会塌陷；Safari 14–15对flex容器内语义标签有min-width计算bug；现代项目若真实用户中IE占比为0，就别留html5shiv和冗余CSS。
IE8及以下：DOM里根本没main、section这些节点
不是样式不生效，是浏览器解析时直接跳过——document.querySelector('main')返回null，getElementsByTagName('header')为空数组。连<main></main>这段HTML都不会生成对应DOM元素。
必须用条件注释加载html5shiv：<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->
注意：document.write方式在IE9+已禁用，动态注入得用document.head.appendChild()。
IE9–IE11：标签存在但默认display: inline
html5shiv只解决“识别”，不解决“渲染”。<header></header>在IE9–11里被当成<span></span>处理，导致：
-
margin-top/bottom失效 - 高度塌陷（父容器高度为0）
- 浮动、清除浮动行为异常
必须补全局CSS：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
这条规则不能省，也不能只写部分标签——漏掉hgroup或details，它们照样inline。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
Safari 14–15：flex子项里的section会撑破容器
当<section class="grid"></section>放在display: flex容器中，且内部含图片、<input>或设了width: 100%时，Safari 14–15会错误计算min-width: auto，导致换行失败、横向溢出。
修复方式很具体：
- 给flex子项加
min-width: 0（不是0px，就是0） - 避免同时设置
flex-wrap: wrap和width: 100%，改用max-width: 100% - 用
@supports (display: -webkit-flex)精准命中Safari，别全局加-webkit-前缀
语义标签嵌套：别往p、h1里塞section
HTML规范禁止<p><section>...</section></p>这类嵌套。各浏览器容错策略不同：
- Chrome自动闭合
<p></p>，后续内容跑到外面 - Safari可能截断，
<section></section>后的内容直接消失 - 验证工具报错：
End tag for element "p" implied, but there were open elements
正确做法：
- 所有语义标签都放在
直系下，或嵌套在明确的块级上下文（如<div>、<code><article></article>）中 - 显式闭合可选标签：
<p>文本</p>，别依赖浏览器自动补全 - 用W3C验证服务跑一次：
https://validator.w3.org/nu/
2026年真实情况是：如果你的统计后台里IE用户占比长期为0.0%，那html5shiv、IE专用CSS、条件注释这些代码，就该从构建流程里删干净——留着不仅白占体积，还增加维护负担和潜在冲突点。
