如何为IE11转换异常行为正确应用CSS hack [英] How to properly apply a css hack for IE11 transition misbehaviour

问题描述

我正在将元素的异常行为转移到我的页面中，仅适用于IE(11)；

I am experiencing elements transition misbehaviour into my page, IE(11) only;

全屏旋转滑块保持不变，而当左滑块打开时(如我们在Chrome/Firefox中单击info +按钮)，该滑块不会随wrapper一起移动.感谢@afelixj，我尝试对IE使用此CSS hack ，以便将tansition效果应用于全屏滑块，也添加了.fullscreen-container但没有结果.

The fullscreen revolution slider, remain in place doesn't move with the wrapper when the left slider is opening (clicking on info+ button like we have in Chrome/Firefox). Thanks to @afelixj, I've tried to use this css hack for IE in order to apply the tansition effect to the fullscreen slider too, adding .fullscreen-container but without result.

@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中打开此页面，然后使用info +按钮打开/关闭左滑块.实时链接这里

For comparation, please open this page in IE11 and Chrome and open/close the left slider using the info+ button.Live link here

使用IE11/Chrome中的左滑块打开/关闭，其他非全屏rev滑块页面也可以正常工作. 实时链接此处. 有什么想法吗?

Other non fullscreen rev sliders pages work fine using the left slider open/close in IE11/Chrome. live link here. Any thoughts?

LE:我也尝试过熟练地使用#wrapper或.shiftnav-wrapper:

LE: also I've tried to aaply to the #wrapper or .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.)

(In this second test, the result looks ok in fullscreen rev slider pages but if I open a non-fullscreen rev slider page, the content will be shifted with +590px over 590px. when the left slider is open).

推荐答案

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

Instead of the .fullscreen-container, can you try to apply the style to .forcefullwidth_wrapper_tp_banner class?

这篇关于如何为IE11转换异常行为正确应用CSS hack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！