html语义标签在ie8–ie11中需html5shiv注册并声明display:block才能正常解析和渲染，safari 14–15存在flex子项min-width计算bug，须加min-width:0等修复，且语义标签不可非法嵌套，现代项目应依真实ua数据决定是否弃用ie兼容。
HTML语义标签本身不保证跨浏览器布局兼容，反而在IE8–IE11中会直接导致DOM缺失、样式失效、布局塌陷——必须配合标签注册 + 显式display声明 + 结构约束才能落地。
IE8及以下根本看不到这些标签
IE8及更早版本把<main></main>、<section></section>、<nav></nav>等当未知标签处理：不创建DOM节点、document.querySelector('main')返回null、CSS选择器main { }完全不生效。这不是样式问题，是解析阶段就被跳过。
- 必须在
中用条件注释加载html5shiv.min.js：<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 仅引入shiv不够：IE9–IE11虽能创建元素，但默认
display: inline，必须补CSS：main, section, article, aside, nav, header, footer { display: block; } - 别用
document.write动态注入shiv——IE9+已禁用该方式，要用document.head.appendChild()
Safari 14–15下flex子项会撑破容器
语义标签常嵌套在Flex容器里（比如<section class="grid"></section>），但Safari 14–15对min-width: auto的计算有bug，尤其遇到图片、<input>或width: 100%时，子项拒绝收缩，导致换行异常或横向溢出。
- 给所有flex子项加
min-width: 0（文本/块内容）或min-width: fit-content（内联内容） - 避免在flex容器上同时设
flex-wrap: wrap和width: 100%；改用max-width: 100% - 用
@supports (display: -webkit-flex)精准命中Safari加fix，别盲目加-webkit-前缀
语义标签不能随便塞进
或里
浏览器对“非法嵌套”的容错策略不同：Chrome可能自动闭合 2026年起，绝大多数新项目已可明确放弃IE支持，但「放弃」不是删掉所有兼容代码，而是确认哪些逻辑真正在运行——比如你用<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，Safari可能截断后续内容，结果就是<section></section>在部分浏览器里突然消失或错位。
End tag for element X implied, but there were open elements
<p>文本</p>、<li>列表项</li>，别依赖自动补全<main></main>、<section></section>这类块级语义标签，必须放在直系子元素或明确的块级上下文中，禁止嵌套进<p></p>、<span></span>、<h1></h1>等内联或限制性容器现代项目要不要还管IE？2026年真实取舍点
html5shiv，但实际用户里IE占比为0.02%，那它只是白占1.8KB首屏资源。
html5shiv和条件注释，用<div role="main">替代，保持语义清晰又无负担
<li>仍需保留<code>Normalize.css——它解决的是Chrome/Firefox/Safari之间的默认样式差异，和IE无关，且2026年依然必要
