我甚至將單位從rem更改為PX（在與我的問題類似的另一個問題中推薦），仍然是同樣的問題，我在不同的瀏覽器上檢查了它，每個瀏覽器都有這個問題，但它們的行為和它們在不同的縮放尺寸下造成的差距是不同的。此外，我在響應斷點或大小方面沒有任何問題，一切都工作正常。

基於MDN的視窗與放大或縮小之間的關係：

您的視窗是目前可見的所有內容，特別是「什麼是視口」部分，也許還有一些導航選單。視窗的大小取決於螢幕的大小、瀏覽器是否處於全螢幕模式以及使用者是否放大。

https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

viewport 與 rem 之間的關係：

對於響應式網頁，網頁元素的大小會隨著視窗的大小而改變。 CSS 可讓您使用絕對單位（如像素 (px)）或相對單位（如百分比、em 或 rem 單位）來聲明字體大小。

https://blog.hubspot.com/website/css-rem#:~:text=Rem (short for “root-,1rem will also equal% 2016 像素。

所以問題是：因為多個瀏覽器的行為不同，這個按鈕是否因為放大或縮小而重新定位，與瀏覽器結構或程式設計有關，還是只是其他原因，背後的邏輯是什麼？

/*Default Adjustments*/

:root {
  --color-secondary: #00acc1;
  --color-accent: #F86F03;
  --color-body: #212121;
  --color-text: #FBFFDC;
  --colorButton: #847f7d;
  --colorBorder: #A8A196;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

*,
 ::placeholder {
  color: var(--color-text);
}

html {
  font-size: 10px;
}

body {
  font-family: "Inter", arial, helvetica, sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  background: var(--color-body);
}

.btn {
  background: var(--colorButton);
  border: .1rem solid var(--colorBorder);
  border-radius: .3rem;
}


/*Basic divs*/

.adjust {
  display: flex;
  justify-content: center;
}

.whole {
  background: var(--color-secondary);
  padding: 1.5rem;
  border-radius: 0.6rem;
  margin-top: 2rem;
}

.add {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 1.3rem;
}

.addButton {
  position: absolute;
  cursor: pointer;
  top: 0.27rem;
  right: 8rem;
  font-size: 1.3rem;
  border: 0;
  border-radius: 0 .3rem .3rem 0;
  background: var(--colorButton);
}

.add input {
  outline: none;
  text-indent: 0.5rem;
  font-size: 1.3rem;
  background: var(--colorBorder);
  border: .3rem solid var(--colorButton);
  border-radius: .5rem;
}

.add input::placeholder {
  font-size: 1.25rem;
}

<div class="adjust">
  <div class="whole">
    <form class="add">
      <input class="addBook" type="text" required maxlength="50" pattern="\S(.*\S)?" title="Your book name can't start or end with white space and should include at least 
            1 non-white space character" placeholder="e.g Harry Potter" name="" id="" />
      <button class=" btn addButton">Add</button>
    </form>
  </div>
</div>

圖片：

這是 100% 縮放尺寸，一切正常

這是縮放尺寸的 90%，頂部有一個間隙

這是縮放尺寸的 80%，一切又恢復正常了！

在Zooming-in 中也會出現相同的結果，所以如果這個問題與我的程式碼有關，為什麼它在每個縮放尺寸中都不是恆定的，如果它與我的程式碼無關，那麼幕後發生了什麼？ < /p>