修复了IE11中的位置错误行为

Question

我遇到的元素位置错误行为进入我的页面，仅在IE（11）中;实时链接here。当左侧滑块打开时（单击信息+按钮），保留文本，菜单和左侧边栏文本保持不变，并且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

这可能为时已晚，但我的位置有类似问题：fixed和IE11，整页DIV（通过指定top: 0; bottom: 0; left: 0; right: 0;）。在Chrome，Edge，Firefox和Opera上工作得很好，但IE11在完整的视口大小下显示DIV，并且圆角似乎从父母那里以某种方式继承。

使用IE11开发人员工具，我发现了另一个选项建议作为位置参数 - ＆＃34; -ms-page＆＃34;。使用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;
  }
}

Answer 3

将header移到.shiftnav-wrap之外并将其置于其上方，并单独应用translateX进行标题移动。

.shiftnav-open header{
      transform: translateX(590px);
}

依靠它相对于外部div的运动并不是一个好主意。

  

具有固定定位的元素相对于视口/浏览器窗口而不是包含元素 - http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

是固定的

另一种解决方案是，您可以在左侧absolute div内使用位于#shiftnav-info的标题。

Answer 4

ADD this script in your page. IE fixed position scroll issue fixed.

<script>
if(navigator.userAgent.match(/Trident\/7\./)) {
  document.body.addEventListener("mousewheel", function() {
    event.preventDefault();
    var weelDelta = event.wheelDelta;
    var currentOffset = window.pageYOffset;
    window.scrollTo(0, currentOffset - weelDelta);
  });
}
</script>