html语义标签本身不保证跨浏览器兼容，ie8及以下不识别会导致dom缺失、样式失效；需用html5shiv注册标签并设display:block，safari14–15存在flex子项min-width计算bug，邮件客户端中应弃用改用table布局。
<header></header>、<nav></nav>、<main></main> 这类语义标签本身不提升跨平台兼容性，反而在旧环境里更容易出问题——它们的价值只在现代浏览器和辅助技术中成立；真要“跨平台稳”，得看你怎么用、在哪用、是否兜底。
IE8–IE9 中 <section></section> 根本不进 DOM
IE8 及更早版本遇到 <section></section> 就当没看见：不创建节点、document.querySelector('section') 返回 null、CSS 选择器 section { } 完全不匹配。这不是样式失效，是解析阶段就被跳过。
- 必须在
里用条件注释加载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, nav, header, footer { display: block; } - 别用
document.write()动态注入 shiv —— IE9+ 已禁用，要用document.head.appendChild()
Safari 14–15 下 flex 容器里的 <article></article> 会撑破宽度
语义标签常嵌套在 Flex 布局中，但 Safari 14–15 对 min-width: auto 的计算有 bug，尤其内部含 <img> 或 width: 100% 元素时，<article></article> 拒绝收缩，导致横向溢出或换行异常。
- 避免在 flex 容器上同时设
flex-wrap: wrap和width: 100%，改用max-width: 100% - 用
@supports (display: -webkit-flex)精准命中 Safari 加修复，别盲目加-webkit-前缀 - 对关键子项显式设
min-width: 0，强制允许压缩
邮件客户端里 <header></header> 比 <table> 还不如
<p>Outlook（2007–2019）用 Word 引擎解析 HTML，<code><header></header>、<section></section> 这些标签会被强制换行、忽略 padding、丢掉盒模型；Gmail 会剥离整个 <style></style> 块；Apple Mail 对 flex 支持飘忽不定。最终只有 <table>、<code><tr>、<code><td> 三件套能稳住全场。
<ul>
<li>发邮件的 HTML 必须回归表格布局，语义标签在此场景下不是“增强”，而是“破坏”</li>
<li>哪怕只用 <code><header></header> 包一层标题，在 Outlook 中也可能被拆成两行、上下留白失控
<table> 内用 ARIA 属性（如 <code>role="banner"）替代语义标签
语义标签不是银弹，它的跨平台价值高度依赖执行环境：现代浏览器里它让结构清晰、SEO 友好、读屏器可用；但在邮件、旧版桌面 IE、部分移动端 WebView 中，它可能直接变成不可见或错位的幽灵节点。真正决定兼容性的，从来不是你用了什么标签，而是你是否知道它在哪失效、怎么兜底、以及——该不该用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
