IE与Edge中CSS媒体查询和transition异常触发问题求助

嘿，我之前也踩过这个IE和Edge特有的CSS过渡坑，结合社区方案整理出了完美解决办法，咱们一步步来理清楚：

先明确咱们遇到的问题 #

咱们的初始设置是：

• 给div设固定宽度1600px，加了transition: width 0.5s
• 用媒体查询给≤1000px的屏幕设div宽度400px

结果在IE/Edge里出了俩问题：

• 浏览器宽度＞1000px时首次进网站（不刷新），div居然会从400px过渡到1600px——完全不符合预期，本来应该直接显示1600px的
• 试着把transition移到媒体查询里后，窗口从＜1000px拖到＞1000px时，过渡直接失效了；但Chrome和Firefox啥事没有

为啥会这样？ #

IE和Edge的渲染引擎在处理样式初始化和媒体查询的顺序上，跟Chrome/Firefox不一样：

• 首次加载时，浏览器可能先临时应用了媒体查询的400px，再切回默认的1600px，这不就触发过渡了嘛
• 把过渡只放在媒体查询里的话，当窗口超出小屏范围，过渡属性直接被移除了，自然没动画了

解决方案：分阶段控制过渡属性 #

咱们可以通过「默认禁用过渡，小屏启用过渡」的思路来解决，具体代码如下：

第一步：写基础样式 #

先给div设置默认宽度，同时默认禁用过渡，避免初始加载时的异常动画：

.container {
  width: 1600px;
  /* 默认状态下禁用过渡，防止首次加载触发动画 */
  transition: width 0s;
}

第二步：媒体查询里启用过渡 #

在小屏的媒体查询中，设置小屏宽度的同时，启用过渡动画：

@media (max-width: 1000px) {
  .container {
    width: 400px;
    /* 小屏状态下开启过渡效果 */
    transition: width 0.5s;
  }
}

可选：JS辅助处理极端场景 #

如果纯CSS方案还遇到个别极端情况（比如某些旧版Edge），可以加一点点JS来兜底：

// 页面加载完成后，确保过渡逻辑正常
window.addEventListener('load', () => {
  const container = document.querySelector('.container');
  // 加载完成后根据当前窗口宽度设置过渡
  container.style.transition = window.innerWidth <= 1000 
    ? 'width 0.5s' 
    : 'width 0s';
});

// 监听窗口resize事件，动态调整过渡
window.addEventListener('resize', () => {
  const container = document.querySelector('.container');
  container.style.transition = 'width 0.5s';
  // 触发一次重绘，确保浏览器能正确识别样式变化
  void container.offsetWidth;
  // 如果不需要大屏切小屏的动画，可以再改回0s，按需调整
});

验证效果 #

这样调整后：

• 首次在＞1000px的IE/Edge里打开页面，div直接显示1600px，再也没有奇怪的初始动画
• 窗口从大屏拖到小屏，div平滑过渡到400px
• 从小屏拖回大屏，也能平滑过渡回1600px
• Chrome和Firefox的原有正常效果完全不受影响

内容的提问来源于stack exchange，提问作者Sinf