絕對位置的跨頁自動被推離網頁

這是一個單頁網站的第三部分，每一部分都占用了總視口的高度和寬度。div'gun'中的span元素在Firefox瀏覽器中被推倒，產生了一個空白，而在Edge中看起來卻完全正常。我推測這是因為相對和絕對定位的原因（在回答幾個空白問題時提到了這一點），但我不知道如何解決。

以下是該網頁中僅有的一部分的HTML（"結束 "div是對整個網站第三部分的包裝）：

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  /* IE和Edge */
  scrollbar-width: none;
  /* Firefox */
}


/* Hide scrollbar for Chrome, Safari and Opera */ }

body::-webkit-scrollbar {
  display: none;
}


/*結束 */

.end {
  background-color: pink;
  width: 100%;
  height: 100vh;
  position: relative;
}


/* 槍支和公司 */

.gun img {
  position: absolute;
  width: 38%;
  height: auto;
  object-fit: 包含。
  transform: 旋轉(75deg) 翻譯(20rem, -24.5rem) 。
  filter: sepia（0.8）。
}

.gun-shadow {
  position: absolute;
  top: 32rem;
  left: 46rem;
  width: 100px;
  /*80 px, probably*/
  height: 370px;
  /*385px */
  background-image: linear-gradient(-90deg, #ffbebe, #fffaf0) 。
  border-radius: 100%;
  transform: 旋轉（90deg）。
}

.gun-shadow2 {
  position: absolute;
  top: 34.3rem;
  left: 46.5rem;
  width: 80px;
  /*60px*/
  height: 285px;
  /*300px */
  background-color: #202b3a;
  border-radius: 100%;
  transform: 旋轉（90deg）。
}

.spotlight {
  position: absolute;
  top: 5.8rem;
  left: 32.75rem;
  width: 530px;
  height: 600px;
  background-image: linear-gradient(-0deg, #202b3a, transparent);
  clip-path: polygon(0 0, 100% 0, 63。 85% 150%, 33.35% 150%）。)
  /* polygon(0 0, 100% 0, 80% 100%, 20% 100%) */
  opacity: 0.4;
}

.gun-shadow2: :after {
  width: 80px;
  height: 285px;
  background: fuchsia;
  border-radius: 50%;
}

<div class="end"> /span>
  <div class="gun">/span>
    <img src="https://cdn.pixabay. com/photo/2013/07/13/11/52/pistol-158868_960_720.png" alt="the gun"> 
    <span class="gun-shadow"/span>> </span>>
    <span class="gun-shadow2"/span>> </span>>
    <span class="spotlight"> </span>>
  </div>/span>
  <div class="footer"> 
    <div class="social-icons1"/span>>
      <ul>/span>
        <li>/span>
          <a href="#" class="fas fa-at"> </a> <span class=" content content1"> 點擊發送電子郵件</span>。
        </li>/span>
        <li>/span>
          < a href="#" class="fas fa-envelop-open"> </a> <span class=" content content2"> 我們確實有一個郵箱</span>。
        </li>/span>
        <li>/span>
          <a href="#" class="fas fa-phone"> </a> <span class=" content content3"> 叫我們也許</span>。
        </li>/span>
      </ul>/span>
    </div>/span>

該代碼可能有幾個問題。如果你需要任何其他資訊來了解情況，請讓我知道。謝謝你。

邊緣版本。

Firefox版本：

火狐版本。

uj5u.com熱心網友回復：

最快速的解決方法是在.gun-shadow、.gun-shadow2和.spotlight中減少2rem屬性。

另一種方法是將top屬性改為bottom屬性，并給它一個數字來定位你想要的地方。 試試這個樣式：

.gun-shadow {
    position: absolute;
    底部：-128px。
    left: 46rem;
    寬度：100px。
    /*80 px, probably*/
    高度：370px。
    /*385px*/
    Background-image: linear-gradient(-90deg, #ffbebe, #fffaf0);
    border-radius: 100%;
    變換：旋轉（90度）。
}

.gun-shadow2 {
    位置：絕對。
    底部：-85px。
    左邊：46.5rem;
    寬度：80px。
    /*60px*/
    高度：285px。
    /*300px*/
    背景顏色。#202b3a;
    border-radius: 100%;
    變換: 旋轉(90度)。
}

.聚光燈 {
    位置: 絕對的。
    底部。61px;
    左邊：32.75rem;
    寬度：530px。
    高度：600px。
    background-image: linear-gradient(-0deg, #202b3a, transparent);
    clip-path: polygon(0 0, 100% 0, 63.85% 150%, 33.35% 150%);
    /*多邊形(0 0, 100% 0, 80% 100%, 20% 100%) */
    不透明度：0.4。
}

一個非常重要的事情是使用絕對單位，如px而不是rem

標籤：

上一篇：preventDefault、stopPropagation和cancelBubble不足以防止contextMenu試圖在Firefox移動測驗視圖中打開。

下一篇：提交按鈕會重新加載頁面