怎么判断浏览器到底支不支持某个 HTML5 特性
不能看 doctype，也不能靠 navigator.userAgent 字符串猜——IE8 声称自己是“Mozilla”，Chrome 也可能被伪装。真正靠谱的是「行为检测」：它能干这件事吗？而不是“它叫什么名字”。
常见错误现象：document.querySelector('header') 在 IE8 返回 null；localStorage.setItem 在 Safari 隐私模式下直接抛 QuotaExceededError，哪怕 typeof localStorage !== 'undefined' 是 true。
-
document.createElement('nav').nodeType === 1—— 确认语义标签可被识别和渲染 -
try { localStorage.setItem('__test__', ''); localStorage.removeItem('__test__'); return true; } catch(e) { return false; }—— 必须读写一次才敢用 -
'geolocation' in navigator或'IntersectionObserver' in window—— API 存在性检测，但注意：存在 ≠ 可靠（如旧版安卓 WebView 中Promises存在但 resolve 不触发）
IE8–IE9 怎么让 <header></header> 这些标签生效
它们不是“不显示”，而是被当成未知内联元素，display: block 失效、CSS 选不到、DOM 查询返回空。核心问题不在样式，而在浏览器根本不认识这个标签名。
使用场景：老系统仍需兼容 IE8 的政务/金融内网项目，或遗留系统渐进升级。
立即学习“前端免费学习笔记（深入）”；
- 必须引入
html5shiv，且放在最顶部（<meta charset>后立即加载）：<!--[if lt IE 9]><br><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><br><![endif]-->
- 仅引入 shiv 不够，还得手动加 CSS：
header, nav, section, article, aside, footer { display: block; }—— 否则即使标签创建成功，仍按内联方式渲染 - 别用条件注释包裹整个页面结构（比如把
也包进去），会导致 IE8 渲染引擎进入怪异模式，引发更多布局 bug
为什么写了 border-radius 在某些浏览器里没圆角
不是代码写错了，是浏览器压根没解析这个属性。CSS3 属性在旧版浏览器中需要厂商前缀才能识别，而不同版本的 Chrome、Firefox、Safari 对前缀的支持节奏完全不同。
性能 / 兼容性影响：手动写全前缀（-webkit-、-moz-、-ms-）易漏、难维护；不写则 IE9、Android 4.3 等大量存量设备失效。
- 推荐用构建工具集成
autoprefixer，根据目标浏览器范围自动补全（例如配置"supports": ["> 1%", "last 2 versions"]） - 如果纯静态页无法构建，至少保留两个前缀：
-webkit-border-radius（覆盖 Safari/旧 Chrome） + 标准border-radius（IE9+、现代所有浏览器） - 不要加
-ms-border-radius：IE9 支持标准写法，IE8 及以下根本不支持该属性，加了也没用
<video></video> 在不同浏览器里只播一半就卡住，怎么排查
根本原因几乎全是编码格式不匹配。Chrome 能硬解 H.264，Firefox 却默认禁用；Safari 支持 HEVC，但 Android 浏览器基本不认。不是 JS 控制逻辑出错，是视频文件本身在某些环境里根本无法 decode。
使用场景：企业宣传页嵌入产品视频、在线课程平台播放教学资源。
- 必须提供至少两种格式：
<source src="video.mp4" type="video/mp4"></source>（H.264 baseline，兼容性最好） +<source src="video.webm" type="video/webm"></source>（VP9，开源免费，Chrome/Firefox 优先选它） - 避免只依赖
<video src="xxx.mp4"></video>单源写法——这会让不支持 MP4 的浏览器直接放弃加载 - 用
canplaythrough事件代替loadeddata判断是否真能播完；监听error事件并打印video.error.code（如MediaError.MEDIA_ERR_DECODE就明确指向解码失败）
<input type="date"> 在 IE 里回退成文本框没问题，但如果 JS 又基于它的 valueAsNumber 属性做计算，就会在 IE 下静默报错、功能断裂。得把 HTML、CSS、JS 三层的降级逻辑对齐，而不是只修表面。 
