固定的位置在其他浏览器中不能保持固定状态

Question

我有一个退出模态的图标，在Chrome浏览器上向下滚动时，它能完美地固定下来，但我注意到它在其他浏览器上，如Firefox和Safari浏览器上不能工作。我还注意到，这个图标在右角有点偏离，但是在一瞬间它又重新定位到了它应该在的位置。请问是什么原因？是不是因为模式的父体是固定位置的，而你不能在固定的容器内有固定的位置？我还在学习HTML。

.outer {
  position: fixed;
  top: 0;
  width: 70px;
  cursor: pointer;
  z-index: 3;
  right: 0;
  margin: 20px 20px 0px 0px;
}

.inner {
  width: inherit;
  text-align: center;
}


.inner::before, .inner::after {

    position: absolute;
    content: '';
    height: 1px;
    width: inherit;
    background: #FFC107;
    left: 0;
    transition: all .3s ease-in;

#animatedModal3 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow-y: auto;
  z-index: 9999;
  opacity: 1;
  animation-duration: 0.6s;
}

.inner::after {

    bottom: 50%;
    transform: rotate(-45deg);

}

.inner::before {

    top: 50%;
    transform: rotate(-45deg);

}

<div id="animatedModal3" class="bg-black">

  <div class="close-animatedModal3 py-3 bg-black">
    <div class="outer">
      <div class="inner">
        <label class="label2">Back</label>
          </div>
          </div>

          </div>
          </div>

Answer 1

你有一个括号，在这里没有关闭.inner::before, .inner::after {... ...