IE11中的固定位置不当行为 [英] Fixed position misbehaviour in IE11

问题描述

仅在IE（11）中，我在页面中遇到元素位置不当行为；实时链接

LE：我已经找到了与IE11中的滑块一起使用的可能解决方案：

  .header {
位置：绝对； 
} 
 
 .bar-side {
 position：absolute; 
} 
  

将与滑块一起使用，但也会在垂直滚动上移动。如果我以某种方式解决此问题，则可能是一种解决方案。

解决方案

要获得一种快速解决方案，请仅在IE中的css hack中单独为IE添加转换。

  @media屏幕和（-ms -high-contrast：active），（-ms-high-contrast：none）{
 .header，＃bar-left {
 left：0; 
过渡：所有0.5秒； 
} 
 .shiftnav-open .header，.shiftnav-open＃bar-left {
 left：590px; 
} 
} 
  

I am experiencing elements position misbehaviour into my page, in IE(11) only; live link here. The logotext, the menu and the left sidebar text, remain in place doesn't move with the wrapper when the left slider is open (clicking on info+ button). I've read about position: fixed + transition in IE problems.

I've tried to apply position: expression(fixed); to the header but something went wrong and the wrapper receive a brake-movement at open/closing slider. (The sidebar didn't work with position: expression(fixed);)

Also I've tried to tweak the css modifying the element position values in static/ absolute but without succees.Tests are made in full screen, the theme is not for mobile screens.Any thoughts?

LE: I've found a possible solution that works with the slider in IE11:

.header {
  position: absolute;
}

.bar-side {
  position: absolute;
}

Will work with the slider but also will move on vertical scroll.If I ca fix that somehow, could be a solution.

解决方案

For a quick solution add transform separately for IE, in IE only css hack.

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

这篇关于IE11中的固定位置不当行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！