IE11中的固定位置异常

Question

我仅在IE（11）中遇到元素位置异常行为进入我的页面；现场链接在这里。徽标文字，菜单和左侧边栏文本保持不变，并且在wrapper打开左侧滑块（单击“信息+”按钮）时不会随其移动。我已经阅读了IE问题中的position: fixed+ transition。

我曾尝试将其应用于position: expression(fixed);，header但出了点问题，并且wrapper在打开/关闭滑块时收到制动动作。（侧边栏不适用于position: expression(fixed);）

我也尝试过css修改元素位置值的修改，static/ absolute但没有成功。测试是在全屏模式下进行的，主题不适用于手机屏幕。

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

.header {
  position: absolute;
}

.bar-side {
  position: absolute;
}

可以使用滑块，但也可以在垂直滚动上移动。如果我以某种方式解决此问题，则可以解决。

Answer 1

这可能为时已晚，但是对于整页DIV（通过指定top: 0; bottom: 0; left: 0; right: 0;），我对position：fixed和IE11也有类似的问题。在Chrome，Edge，Firefox和Opera上可以正常工作，但是IE11可以在整个视口大小下以一定角度显示DIV，并且圆角似乎是从父级继承来的。

在使用IE11开发人员工具时，我发现了一个建议作为位置参数的替代选项-“ -ms-page”。使用position: -ms-page排序问题；在此之前，position: fixed允许其他浏览器继续运行。

希望这可以帮助其他有类似问题的人...

Answer 2

为了快速解决方案，为 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;
  }
}