ie8及以下不识别html5标签,需用html5shiv通过document.createelement()注册并配合css设display: block;多媒体标签需多源格式+flash降级;localstorage需存在性检测并降级至cookie。

IE8及以下根本不认识这些标签
不是样式没生效,是浏览器压根不把它当HTML元素处理——遇到不认识的标签,IE8会当成普通文本或内联元素,display: block在CSS里写了也白写,因为整个规则会被跳过。
- 必须用
document.createElement()提前“注册”这些标签,让IE知道它们是合法元素 -
html5shiv就是干这个的,它内部批量调用了document.createElement(),还触发了重绘 - 加载位置很关键:必须放在
里,且要在任何CSS之前;否则样式已解析完毕,再创建元素也来不及应用 - 条件注释要写对:
<!--[if lt IE 9]>...<![endif]-->,IE10+和现代浏览器完全忽略这段
只靠html5shiv还不够,CSS还得手动兜底
html5shiv解决了“识别”问题,但IE8默认不给这些新标签设样式,比如<section></section>不会自动换行、撑开高度,布局照样错乱。
- 必须显式声明块级行为:
header, nav, section, article, aside, footer, main, figure { display: block; } - 别漏掉
<main></main>——它在IE中尤其容易被忽略,且部分旧版Polyfill不包含它 - 避免用
normalize.css替代这一步:它不处理未知标签的display,只归一化已有元素的默认样式 - 如果项目用了CSS预处理器(如Sass),建议把这组选择器单独抽成
_html5-fallback.scss,方便复用和审查
不是卡顿或黑屏,是直接降级为“不支持该标签”,连controls都不会显示。靠html5shiv完全无效——它只管语义标签,不管多媒体API。
- 必须提供多格式源:
<source src="video.mp4" type="video/mp4"></source>+<source src="video.webm" type="video/webm"></source> - IE8及以下连
<video></video>标签都不认,得用<object></object>兜底,指向Flash fallback(如video.swf) - 不要依赖
canPlayType()做判断:IE8返回空字符串,Modernizr.video更可靠 - 移动端不用操心这个——iOS Safari 3.2+、Android Browser 2.1+都原生支持
<video></video>,真正的问题集中在桌面IE生态
localStorage在IE7里根本不存在
不是报错,是window.localStorage直接为undefined,任何读写操作都会触发TypeError。html5shiv对它完全无感。
立即学习“前端免费学习笔记(深入)”;
- 必须做存在性检测:
if (typeof localStorage !== 'undefined'),不能只靠try/catch - IE7/8可用
userData行为模拟,但仅限IE,且有64KB单域限制;更通用的做法是fallback到cookie(需自行封装序列化/过期逻辑) - 别用
sessionStorage替代:它在IE7里同样不存在,且生命周期不同,不能混用 - 第三方库如
store.js能自动降级,但要注意它对cookie的编码方式与原生localStorage不一致,跨环境同步时可能出问题
<main></main>标签的双重兼容:既要html5shiv声明,又要CSS设display: block,还要确保Modernizr检测时把它纳入语义化支持判断——少一步,无障碍工具和SEO就可能掉链子。











