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

Question

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

当左侧滑块打开时，全屏旋转滑块保持原位不会随着 wrapper 移动（单击信息+ 按钮，就像我们在 Chrome/Firefox 中所做的那样）。感谢@afelixj，我尝试对 IE 使用，以便将过渡效果也应用于全屏滑块，添加 .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 和 open/close 左侧滑块使用信息+ button.Live link here

其他非全屏转速滑块页面在 IE11/Chrome 中使用左滑块 open/close 工作正常。直播 link 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;
  }
}

（在第二次测试中，结果在全屏旋转滑块页面中看起来不错，但如果我打开一个非全屏旋转滑块页面，内容将移动 +590px 超过 590px。当左滑块打开时） .

Answer 1

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

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

How to properly apply a css hack for IE11 transition misbehaviour

css-position

css-transitions

internet-explorer-11

revolution-slider