HTML5语义标签在IE8及以下无效因未识别，需html5shiv注册；旧版Safari/Chrome flex语法不兼容，应使用Autoprefixer；input[type=date]在Firefox和旧Safari无原生支持，须检测降级；跨浏览器差异主因CSS渲染机制不同，非HTML5本身不兼容。
HTML5 本身没有“改格式”这个操作，所谓“格式异常”几乎全是 CSS 渲染差异或 HTML 结构语义误用导致的跨浏览器表现不一致——不是 HTML5 不兼容，而是你写的 HTML + CSS 组合在不同引擎里被解析/渲染得不一样。
为什么 <section>、<article> 在 IE8 里不生效
IE8 及更早版本根本不认识 HTML5 语义标签，它们被当作未知元素，既无默认样式，也不被 DOM API 正常识别（比如 document.querySelector('section') 会返回 null）。
- 必须引入
html5shiv（通过<script>动态创建这些元素，触发 IE 的“元素注册”机制） - 仅在
<head>中条件加载：IE9 以下才需要，IE9+ 已原生支持 - 注意：
html5shiv不修复 CSS 选择器失效问题——必须搭配document.createElement('section')或使用 shiv 的完整版（如html5shiv-printshiv.js） - 现代项目若已放弃 IE8–9，可直接移除 shiv；但若仍需支持，务必确认 script 加载顺序早于任何依赖语义标签的 JS
flexbox 布局在 Safari 9–10 和旧版 Chrome 中错位
这些版本使用的是 2012 年旧版 flex 语法（display: -webkit-box），与标准 display: flex 不兼容，且属性名、值含义均有差异（例如 flex-direction 在旧版中是 -webkit-box-orient）。
- 不要手动写多套前缀——用 Autoprefixer 工具自动补全，目标设为
"last 2 versions, iOS >= 9, Safari >= 9" - 避免混用：比如
display: -webkit-flex; display: flex在 Safari 9 会因后声明覆盖而失效 - 特别注意
flex-wrap：Safari 9.1+ 才支持，旧版强行使用会导致子项溢出容器且不换行 - 测试时打开 Safari 开发者工具 → “Elements” 面板，检查 computed 样式中是否真正应用了
flex相关属性，而非被降级为 block
input type="date" 在 Firefox 和 Safari 中显示为普通文本框
Firefox 桌面版至今（2024）仍未实现原生 date 选择器；Safari 直到 macOS Monterey（12.0）和 iOS 14.5 才开始支持，且行为与 Chrome 差异明显（例如无清空按钮、不支持 min/max 的实时校验）。
立即学习“前端免费学习笔记（深入）”；
- 不能依赖原生控件统一行为——必须检测支持性：
const isDateSupported = typeof document.createElement('input').type === 'date'; - 若不支持，降级方案优先选轻量 JS 库（如 flatpickr），而非自己造轮子；注意其初始化时机（DOM ready 后再绑定）
- 表单提交前务必用 JS 校验日期格式（
valueAsDate在不支持的浏览器中为null），不能只信required或pattern - 移动端 iOS Safari 的 date picker 会强制唤起系统键盘，影响体验——可加
inputmode="none"抑制（但仅部分新版本支持）
最常被忽略的点：跨浏览器问题往往不是“某个标签不支持”，而是“同一个 CSS 属性在不同引擎里对继承、层叠、盒模型计算的边界处理不同”。调试时别急着加 hack，先用开发者工具对比 computed styles，看是初始值不同，还是继承链断裂，或是 flex/grid 容器的 min-size 行为差异——这些细节比标签名是否认识重要得多。
