ie11中:hover动画卡顿或跳帧，主因是触发重排：必须仅用transform和opacity动画，禁用width/height/margin等布局属性；需声明doctype、遵循lvha顺序、父元素设position: relative，伪元素慎用content变更，避免误触与定位偏差。
IE11里:hover动画卡顿或跳帧，基本是重排触发的
IE11对CSS动画的优化远弱于现代浏览器，一旦:hover里改了width、height、margin、padding或display，就会强制同步重排，画面直接卡顿甚至“抽搐”。这不是bug，是它渲染引擎的固有限制。
实操建议：
- 把所有动画属性锁定在
transform和opacity上——IE11对这两个属性有硬件加速支持 - 避免在:hover中设置
border: 2px solid #007bff这类写法；常态就用border: 2px solid transparent占位 - 伪元素（如
::after）必须加position: absolute且父元素设position: relative，否则IE11定位计算不稳定 - 过渡时间别设太短，
transition: transform 0.2s ease比0.1s更稳，IE11对亚毫秒级动画处理容易丢帧
:hover在IE11里突然失效或只点一下才生效？检查DOCTYPE和选择器顺序
IE11标准模式下:hover本身是支持的，但失效往往不是伪类问题，而是环境没配对。常见触发条件不满足，导致样式压根没加载。
实操建议：
- HTML开头必须有
，缺这个IE11会进怪异模式，:hover直接被忽略 - :hover选择器不能写在
:link或:visited之前——IE11严格遵循LVHA顺序：a:link→a:visited→a:hover→a:active - 别用太深的嵌套选择器，比如
.nav ul li a:hover，IE11解析慢还容易漏匹配；改用.nav-link:hover这类扁平类名 - 确保元素本身可交互：IE11对
<div>默认不触发:hover，得加<code>tabindex="0"或role="button"IE11下::after伪元素hover抖动，核心是定位上下文缺失
IE11对
::after的absolute定位依赖父元素的position声明，如果父元素没设position: relative，伪元素会按body定位，hover时坐标计算偏差，视觉上就是“跳一下”。实操建议：
- 所有用
::after做hover动画的父元素，基础样式必须含position: relative - 别在:hover里动态改
content值，IE11遇到content: ""→content: "→"会重排整个伪元素盒 - 宽度变化一律用
transform: scaleX()，禁用width: 0% → width: 100%，后者在IE11里必然抖 - 加
transform: translateZ(0)到伪元素上，能提前触发合成层，减少重绘抖动
移动端或触屏设备上IE11的:hover误触发，本质是悬停状态不可靠
IE11 on Windows Tablet 或 Surface 设备会把首次触摸模拟成:hover，之后再无触发；或者鼠标模式下快速划过，hover态残留导致后续动画错乱。这不是性能问题，是状态机没对齐。
实操建议：
- 别把关键反馈逻辑绑死在:hover上，比如“点击后才显示菜单”，改用
:focus或JS监听click补位 - 用
@media (hover: hover) and (pointer: fine)包裹纯:hover样式，让触屏设备自动跳过 - 如果必须保留hover效果，加
transition-delay: 0.1s，过滤掉误触的瞬时悬停 - 避免相邻元素hover区域紧贴，IE11边缘判定精度低，容易来回切换状态造成闪动
getBoundingClientRect()返回的width、height、top、left有没有一个像素的变化。这点在开发者工具里切:hover状态就能验证，但多数人跳过这步，直接调动画参数，越调越乱。 - 所有用
