HTML5 新特性需按浏览器能力分层降级：date 输入框用特性检测+轻量日历库fallback；语义标签用html5shiv+class兜底；picture/srcset保留img src兜底；自定义元素和Shadow DOM在iOS10以下不可用，需函数化核心逻辑。
HTML5 里 <input type="date"> 在旧浏览器直接不显示怎么办
老版本 Chrome、所有 IE、部分安卓 WebView 会把不支持的 type 降级成 text，但 Safari（iOS 13.7 之前）和某些国产浏览器可能直接隐藏控件或留白——不是 bug，是规范行为。
别指望 polyfill 自动补全 UI，得主动 fallback：
- 用
Modernizr.inputtypes.date或简单检测document.createElement('input').type === 'date'判断是否原生支持 - 不支持时，手动引入轻量日历库（如
flatpickr），只在降级路径中初始化，避免新浏览器多加载 JS - 服务端必须校验日期格式，不能依赖前端
type="date"的约束——它连基本的闰年都拦不住
HTML5 新语义标签（<main>、<nav>、<section>）在 IE8 及以下怎么渲染
IE8 不识别这些标签，document.createElement 能解决 DOM 构建问题，但样式依然无效——因为 IE8 的 CSS 选择器引擎不认未知标签名。
最小代价方案就是加一层兼容性处理：
立即学习“前端免费学习笔记（深入）”；
- 页面开头插入
document.createElement('main')等调用（可用html5shiv，但只加载一次，别 CDN 挂死） - CSS 中避免只写
main { }，改成main, .main { }并给对应元素加 class，确保降级时样式不丢 - 别为了“语义化”强行替换所有
<div id="header">—— 如果只是视觉布局，<div role="banner">对屏幕阅读器更稳
<picture> + srcset 在 Safari 9 和 Android 4.4 默认浏览器里失效的常见原因
这两个特性在旧版 Safari 和 WebKit 内核中支持不完整：<source> 的 media 查询可能被忽略，srcset 的宽度描述符（w）可能被当普通字符串处理，最终只加载 <img> 的 src。
稳妥做法不是放弃响应式图片，而是控制降级粒度：
- 始终保留
<img src="fallback.jpg">作为最后兜底，不要依赖<picture>的结构完整性 - 避免在
<source>中混用media和type，旧浏览器容易挂掉整个<picture>块 - Android 4.4 的 WebView 对
srcset支持极差，建议用data-srcset+ JS 检测后动态赋值，比纯 HTML 更可控
自定义元素（customElements.define()）和 Shadow DOM 在 iOS 10/Safari 10 以下完全不可用
iOS 10 是第一个支持 customElements.define() 的系统，之前的 Safari、所有 UC 和 QQ 浏览器内置 WebView 都没实现。这不是“兼容性差”，是根本不存在。
想用组件化思路又得保老环境，就得接受分层现实：
- 核心逻辑抽成独立函数（如
renderCard(data)），用<div class="card">渲染，自定义元素只作为新环境的封装壳 - Shadow DOM 的样式隔离优势在老浏览器里无法模拟，别强求；用 BEM 或 CSS-in-JS 保证 class 层级干净更实际
- 如果项目已用 Web Components 构建，构建时用
@webcomponents/webcomponentsjs的custom-elements-es5-adapter.js，但它只解决语法转换，不补 API 缺失
跨版本兼容最麻烦的从来不是语法，而是不同浏览器对“同一个标准”的实现节奏差了三年以上——你写的 <dialog> 在 Chrome 是模态框，在 Firefox 是普通块级元素，在 IE 是报错空白，得按浏览器能力切片加载，而不是堆 polyfill。
