时间戳

首页 > 解决方案 > position:sticky 在 IE 11 上不能与 display:flex 一起使用

javascript - position:sticky 在 IE 11 上不能与 display:flex 一起使用

问题描述

我正在尝试使position: stickyanddisplay: flex属性在 Internet Explorer 11 上工作。

它在 Chrome、Firefox 和 Edge 上运行良好，但令人惊讶的是；它不适用于 Internet Explorer 11。

<div class="flexbox-wrapper">
  <div class="regular">
     This is the regular box
  </div>
  <div class="sticky">
     This is the sticky box
  </div>
</div>

.flexbox-wrapper {
  display: flex;
  height: 200px;
  overflow: auto;
}
.regular {
  background-color: blue;
  height: 600px;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

JSFIDDLE

如何让它在 IE11 上运行？

我尝试使用StickyState polyfill，但没有任何结果。

如果position: stickyordisplay: flex在 IE11 上不起作用，这不是问题，因为它们都单独工作：

位置：粘性；工作演示

我的主要问题是我想要主要内容部分和旁边的侧边栏菜单，滚动时应该可见。在这里使用position: fixed不是一个选项。

标签： javascripthtmlcssflexboxsticky

解决方案

这是用于显示：flex

将此样式添加到您的 flexbox-wrapper 类中：

.flexbox-wrapper {
      display: -ms-flexbox;
      }

然后

.regular {
    -ms-flex: 1 0 auto;
    }

flex 简写计算为 flex-grow、flex-shrink、flex-basis

推荐阅读