Question

以下代码适用于Chrome，但在Edge上，Sticky元素不合适

＆＃13;

.main {
  display: flex;
  max-width: 1200px;
  width: 100%;
  flex-flow: row nowrap;
  margin: auto;
  text-align: center;
  font-size: 30px;
}
.sticky {
  width: 300px;
  max-height: 715px;
  position: sticky;
  top: 10px;
  padding: 15px;
  margin: 20px 30px 0 0;
  box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
  background: yellow;
}

.content {
  height: 1600px;
  flex: 1 1;
  background: red;
}

＆＃13;

<body dir="rtl">
    <main class="main">
      <div class="content">Scrollable content here</div>
      <div class="sticky">Sticky content here</div>
    </main>
</body>

＆＃13;

Edge中的结果：

我注意到，如果我从粘性组件中移除盒子阴影或从身体移除dir = rtl。这一切都按预期工作。

Answer 1

它似乎是Edge中的一个错误，并且在调整窗口大小之后jsFiddle，它纠正了自己。

Edge在dir="trl"设置了body时也会做什么，它会在视口的左侧渲染滚动条，例如， Chrome和Firefox都没有。

解决方法可能是使用dir=rtl上的body代替交换位置，使用Flexbox自己的order属性，然后设置direction控制流动的内在元素。

Fiddle demo

Stack snippet

＆＃13;

.main {
  display: flex;
  max-width: 1200px;
  /*width: 100%;                       default  /*
  /*flex-flow: row nowrap;             default  */
  margin: auto;
  text-align: center;
  font-size: 30px;
}
.sticky {
  width: 300px;
  max-height: 715px;
  position: sticky;
  top: 10px;
  padding: 15px;
  margin: 20px 30px 0 0;
  box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
  background: yellow;
}

.content {
  height: 1600px;
  flex: 1 1;
  background: red;
  order: 1;                         /* added, move last  */
}

＆＃13;

<body>
    <main class="main">
      <div class="content">Scrollable content here</div>
      <div class="sticky">Sticky content here</div>
    </main>
</body>

＆＃13;

根据评论更新。

经过一些更多的测试和研究，尝试将显然导致此问题的box-shadow移动到内部元素（如伪），仍然会偏移.sticky元素。

所以两个简单的解决方案，dir="rtl"可以保留在body上，使用伪，使用图像来创建阴影，或者，如下面的示例所示，使用filter财产。

在这里，我使用CSS技巧仅在Edge上应用它，但它可以完全取代box-shadow，以及更多关于需要支持的旧浏览器的方法。

Fiddle demo 2

Stack snippet 2

＆＃13;

.main {
  display: flex;
  max-width: 1200px;
  width: 100%;
  flex-flow: row nowrap;
  margin: auto;
  text-align: center;
  font-size: 30px;
}

.sticky {
  width: 300px;
  max-height: 715px;
  position: sticky;
  top: 10px;
  padding: 15px;
  margin: 20px 30px 0 0;
  box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
  background: yellow;
}

/*  CSS to target Edge only  */
@supports (-ms-ime-align: auto) {
  .sticky {
    box-shadow: none;
    filter: drop-shadow( -5px -5px 15px rgba(41,128,185,0.15) );
  }
}

.content {
  height: 1600px;
  flex: 1 1;
  background: red;
}

＆＃13;

<body dir="rtl">
    <main class="main">
      <div class="content">Scrollable content here</div>
      <div class="sticky">Sticky content here</div>
    </main>
</body>

＆＃13;

在Edge上定位粘贴+ RTL +盒子阴影中断

1 个答案: