Question

我正在尝试使display: flex和<div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div> </div>属性在Internet Explorer 11上正常工作。

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

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

position: sticky

JSFIDDLE

如何使其在IE11上运行？

我尝试使用StickyState填充，没有任何结果。

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

Position: sticky; working demo

我的主要问题是我想在其旁边有主要内容部分和侧边栏菜单，滚动时该部分应该可见。在这里不能使用{{1}}。

Answer 1

根据caniuse.com的位置：IE11中不支持粘粘，并且显示：flex有部分支持，因为存在许多错误。

我对StickyState的使用经验不多，但是我使用StickyBits，效果很好。

编辑：

Working example

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

stickybits('#stickyEl');

body {
  height: 1500px;
}
.flexbox-wrapper {
  display: flex;
  display: -ms-flexbox;
}
.regular {
  background-color: blue;
  height: 600px;
  -ms-flex: 1 0 auto;

}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

Answer 2

这是用于显示：flex

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

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

然后

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

flex速记计算为flex-grow，flex-shrink，flex-basis

在IE 11上，position：sticky不能与display：flex一起使用

2 个答案: