ie9及更早版本完全不支持transition,解析器直接忽略整条声明;ie10+才原生支持标准语法,且需确保文档模式为标准模式,否则仍失效。

IE9 及更早版本不支持 transition,不是效果差、不是需要加前缀,而是解析器直接忽略整条声明——写了等于没写。
IE9 及以下浏览器根本无法启用 transition
常见错误现象:transition: all 0.3s 在 IE9 开发者工具里被划掉,状态为 “invalid”;页面切换“瞬间完成”,无任何过渡。这不是 JS 或 HTML 问题,是 CSS 层面彻底失效。
- IE9 不识别
-ms-transition、-webkit-transition等任何前缀,这些前缀只对 IE10+ 或 WebKit 内核有效 -
transition-property、transition-duration等子属性一并失效,连带transform和opacity的过渡也无效 - 即使强制设置
document.documentMode = 9,也无法激活该特性——它压根没实现在引擎里
需要兼容 IE9 时,CSS 层面无解,只能用 JS 替代
别试图用 max-height 模拟展开动画来“骗过” IE9:它虽支持 max-height 声明,但不支持其过渡,max-height: 0 → 200px 仍是跳变。
- 优先用
requestAnimationFrame+ 手动插值,例如控制element.style.transform = 'translateY(' + y + 'px)' - 避免 jQuery.animate():它在 IE9 中依赖已废弃的
filter: alpha()实现 opacity,易出错且维护停止 - 显隐切换可用
visibility: hidden/visible+opacity(配合 IE9 的filter: alpha(opacity=0))组合实现渐变感 - 高度展开类动画,先用
getBoundingClientRect()获取目标高度,再逐帧设置element.style.height,注意读写分离,避免 layout thrashing
transition 在 IE10–IE11 能用,但文档模式必须正确
IE10+ 支持标准 transition,但前提是页面运行在标准文档模式下。一旦触发兼容性视图(如 <meta http-equiv="X-UA-Compatible" content="IE=8">),哪怕用 IE11 打开,也会退化为 IE8 引擎,transition 依然失效。
- 确保 HTML
最顶部有<meta http-equiv="X-UA-Compatible" content="IE=edge"> - 检查 HTTP 响应头是否包含
X-UA-Compatible: IE=edge,二者冲突时以响应头为准 - 用开发者工具的“仿真”面板确认当前文档模式是
IE10或IE11标准模式,而非 “IE9 标准模式”(这是模拟,非真实 IE9) - 避免在
中插入任何可能触发兼容视图的第三方脚本或 meta 标签
真正容易被忽略的是:很多人把 IE11 切换到 “IE9 文档模式” 测试,误以为这就是 IE9 行为——但它的渲染引擎仍是 Trident 7.0,某些 CSS 特性(比如部分 transform 组合)仍可工作,而真实 IE9 连 transform 都不支持。测试必须用真机或官方虚拟机镜像。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











