修复了IE11中的位置错误行为(Fixed position misbehaviour in IE11)

修复了IE11中的位置错误行为(Fixed position misbehaviour in IE11)

我在IE（11）中经历了元素位置错误行为到我的页面; 这里有实时链接。 当左侧滑块打开时（单击信息+按钮），保留文本，菜单和左侧边栏文本保持不变，不随wrapper一起移动。 我已经读过关于position: fixed在IE问题中position: fixed + transition 。

我试过应用position: expression(fixed); 到header但是出了问题， wrapper在打开/关闭滑块处接收制动器。 （侧边栏不适用于position: expression(fixed); ）

另外我试图调整css修改static/ absolute的元素位置值但没有成功。测试是全屏幕，主题不适用于移动屏幕。任何想法？

LE：我找到了一个可以在IE11中使用滑块的解决方案：

.header { position: absolute; } .bar-side { position: absolute; }

将使用滑块，但也将移动垂直滚动。如果我以某种方式修复，可能是一个解决方案。

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.

最满意答案

对于快速解决方案，为IE单独添加转换，在IE中只有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; } }

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; } }