HTML语义标签在IE8–IE11中需html5shiv注册并声明display:block才能正常解析和渲染，Safari 14–15存在flex子项min-width计算bug，须加min-width:0等修复，且语义标签不可非法嵌套，现代项目应依真实UA数据决定是否弃用IE兼容。
HTML语义标签本身不保证跨浏览器布局兼容，反而在IE8–IE11中会直接导致DOM缺失、样式失效、布局塌陷——必须配合标签注册 + 显式display声明 + 结构约束才能落地。
IE8及以下根本看不到<main><section>这些标签
IE8及更早版本把<main>、<section>、<nav>等当未知标签处理：不创建DOM节点、document.querySelector('main')返回null、CSS选择器main { }完全不生效。这不是样式问题，是解析阶段就被跳过。
- 必须在
<head>中用条件注释加载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">），但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-前缀
语义标签不能随便塞进<p>或<span>里
浏览器对“非法嵌套”的容错策略不同：Chrome可能自动闭合<p>，Safari可能截断后续内容，结果就是<section>在部分浏览器里突然消失或错位。
立即学习“前端免费学习笔记（深入）”；
- 验证HTML结构：https://www.php.cn/link/6c4ce2d66be954338a51e72eb79aae10跑一次，重点看
End tag for element X implied, but there were open elements - 显式闭合所有可选标签：
<p>文本</p>、<li>列表项</li>，别依赖自动补全 -
<main>、<section>这类块级语义标签，必须放在<body>直系子元素或明确的块级上下文中，禁止嵌套进<p>、<span>、<h1>等内联或限制性容器
现代项目要不要还管IE？2026年真实取舍点
2026年起，绝大多数新项目已可明确放弃IE支持，但「放弃」不是删掉所有兼容代码，而是确认哪些逻辑真正在运行——比如你用html5shiv，但实际用户里IE占比为0.02%，那它只是白占1.8KB首屏资源。
- 查真实UA数据：别只看caniuse的全局统计，看自己CDN或埋点里的IE访问占比
- 如果IE流量＜0.1%，建议移除
html5shiv和条件注释，用<div role="main">替代，保持语义清晰又无负担 - 仍需保留
Normalize.css——它解决的是Chrome/Firefox/Safari之间的默认样式差异，和IE无关，且2026年依然必要
