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

Question

我在我的页面中遇到元素定位错误行为，仅在 IE(11) 中；直播 link here。徽标文本、菜单和左侧边栏文本保留在原位，当左侧滑块打开时（单击信息+按钮）不会随 wrapper 移动。我在 IE 问题中读到了 position: fixed + transition。

我尝试将 position: expression(fixed); 应用到 header，但出了点问题，wrapper 在 open/closing 滑块处收到制动运动。（边栏不适用于 position: expression(fixed);）

我也尝试调整 css 修改 static/ absolute 中的元素位置值，但没有 succees.Tests 全屏制作，主题不适用于移动设备 screens.Any 想法?

~~LE：我找到了一个适用于 IE11 滑块的可能解决方案：~~

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

将与滑块一起工作，但也会在垂直方向上移动scroll.If我无法以某种方式解决这个问题，可能是一个解决方案。

Answer 1

将 header 移到 .shiftnav-wrap 之外并放在上面，并单独应用 translateX 进行页眉移动。

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

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

elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element - http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

另一种方案，可以使用header作为absolute定位，在左边div#shiftnav-info.

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

这可能为时已晚，但我在 position:fixed 和 IE11 上遇到了类似的问题，对于整页 DIV（通过指定 top: 0; bottom: 0; left: 0; right: 0;）。在 Chrome、Edge、Firefox 和 Opera 上运行良好，但 IE11 显示的 DIV 以低于完整视口大小的方式显示，并且圆角似乎以某种方式从父级继承。

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

希望这对遇到类似问题的其他人有所帮助...

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>

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

Fixed position misbehaviour in IE11

css

internet-explorer

css-position

css-transitions

internet-explorer-11