IE8及更早版本不识别HTML5语义标签，需用document.createElement提前注册并补display:block样式；<picture>和srcset在旧WebKit中支持不全，须保留<img>兜底；type="date"在部分浏览器中隐藏而非降级，需JS检测并手动引入日历库；语义标签降级需同步处理DOM、CSS、JS和服务端校验。
IE8 及更早版本根本不认识 <header>、<nav> 这类标签——不是样式不生效，是 DOM 里压根没这节点，CSS 选不到，JS 也查不到。
IE8 及以下浏览器中 document.createElement 必须在 CSS 加载前执行
旧 IE 解析 HTML 时，遇到未知标签名会直接跳过，不生成元素节点。必须靠 document.createElement('header') 这类调用“提前注册”，它才肯把后续同名标签当合法元素处理。
- 脚本要放在
<head>最顶部，且在任何 CSS<link>或<style>之前 - 不能只写一次
document.createElement('nav')，得遍历所有要用的标签：['header', 'nav', 'section', 'article', 'aside', 'footer', 'main'] - 光注册还不够，还得补默认样式：
header, nav, section { display: block; }，否则即使节点存在，也按 inline 渲染 - 如果项目只兼容 IE8+，手写三行比引入 html5shiv 更轻量可控；但注意别漏掉
<main>—— IE11 以下也认不出它
<picture> 和 srcset 在 Safari 9 / Android 4.4 中失效的真实原因
这两个特性在旧 WebKit 内核里支持不完整：<source> 的 media 查询常被忽略，srcset 的宽度描述符（如 1x、2x）可能被当普通字符串丢弃，最终只加载 <img src="..."> 的兜底图。
- 不要指望
<picture>自动 fallback —— 它整个块可能被旧浏览器直接跳过，导致图片完全不显示 - 必须保留
<img src="fallback.jpg">作为最外层兜底，且确保该 URL 是真实可访问的资源 - 服务端不能依赖
srcset做响应式裁剪逻辑，前端 JS 也不该基于picture的加载状态做后续判断 - 若需精确控制，改用 JS 检测
window.devicePixelRatio或screen.width手动换图，反而更稳
type="date" 在 iOS 13.7 之前和部分安卓 WebView 中直接隐藏控件
这不是 bug，是规范行为：Safari（iOS 13.7 之前）、某些国产浏览器、老版 Chrome WebView 遇到不支持的 type，可能直接隐藏整个输入框，而不是降级为 text。
立即学习“前端免费学习笔记（深入）”；
- 检测方式别用 Modernizr —— 太重；用一行就行：
const isDateSupported = document.createElement('input').type === 'date'; - 不支持时，手动引入 flatpickr 等轻量日历库，且只在降级路径中初始化：
if (!isDateSupported) initDatePicker(); -
<input type="date">的约束形同虚设：它连 2024-02-30 这种非法日期都拦不住，服务端必须重新校验格式与有效性 - 别给 date 输入框加 placeholder —— 旧浏览器要么不显示，要么和原生控件样式冲突
最容易被忽略的是：语义化标签的降级不是“加个 polyfill 就完事”，而是从 DOM 构建、CSS 选择器、JS 查询、服务端校验四个层面同步处理。比如 <main> 在 IE8 下就算用 document.createElement 注册了，document.querySelector('main') 依然返回 null —— 得换成 document.getElementById('main') 或加 class 后用 .main 查询。
