如何为 IE11 转换不当行为正确应用 css hack

Posted 2023-05-09

【中文标题】如何为 IE11 转换不当行为正确应用 css hack

【英文标题】：How to properly apply a css hack for IE11 transition misbehaviour

【发布时间】：2015-09-06 23:36:58

【问题描述】：

我在页面中遇到元素转换不当行为，仅限 IE(11)；

当左侧滑块打开时，全屏旋转滑块不会随着wrapper 移动（像在 Chrome/Firefox 中一样单击 info+ 按钮）。感谢@afelixj，我尝试在 IE 中使用 this css hack，以便将 tansition 效果也应用于全屏滑块，添加 .fullscreen-container 但没有结果。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
  .header, #bar-left, .fullscreen-container
      left: 0;
      transition: all .5s;
  
  .shiftnav-open .header, .shiftnav-open #bar-left, .shiftnav-open .fullscreen-container
     left:590px;
  

为了比较，请在IE11和Chrome中打开此页面，并使用信息+按钮打开/关闭左侧滑块。直播链接here

使用 IE11/Chrome 中的左侧滑块打开/关闭，其他非全屏转速滑块页面可以正常工作。 实时链接here。 有什么想法吗？

LE：我也尝试过联系#wrapper 或.shiftnav-wrapper：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
  #wrapper
      left: 0;
      transition: all .5s;
  
  .shiftnav-open #wrapper
     left:590px;
  

（在第二次测试中，结果在全屏转速滑块页面中看起来不错，但如果我打开非全屏转速滑块页面，内容将在 590 像素上移动 +590 像素。当左侧滑块打开时）。

【参考方案1】：

您可以尝试将样式应用到.forcefullwidth_wrapper_tp_banner 类而不是.fullscreen-container 吗？

【讨论】：

就是这样！老实说，先生，你是最好的，特别感谢！亲切的问候，

您好，先生，有没有关于this one 的提示？谢谢