尽管使用了 rem，为什么当我放大或缩小时元素大小会发生变化？

Question

我正在实现一个项目，我使用CSS position 属性在输入中放置一个按钮，一切正常，甚至我在响应模式下也没有问题，巧合的是我想缩放-检查某些内容，我意识到当我放大或缩小输入的顶部或底部之间会出现间隙，并且在某些尺寸下没有间隙，一切都很好，我使用 rem 对于我的所有 CSS 属性，因为据我所知 rem 可以通过 viewport 进行缩放，并且这种放大或缩小与 viewport 相关 大小，所以从逻辑上讲，如果我使用 rem ，当我缩小或放大时不应该有任何间隙，但确实有！

我什至将单位从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%20(short%20for%20%E2%80%9Croot%2D,1rem%20will%20also%20equal% 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>

Answer 1

我认为这与绝对位置有关，我以前经历过。 然而，为了解决这个问题，您可以在按钮周围添加一个包装器，这个包装器是一个弹性盒。

<div class="wrapper">
  <button class="btn addButton">Add</button>
</div>

.wrapper {
    height: 100%;
    width: fit-content;
    padding: .3rem 0;
    position: absolute;
    top: 0;
    right: 0;
    float: left;
    border-radius: 0 .3rem .3rem 0;
    display: flex;
    /*To keep item centered so gap will not appear*/
    align-items: center;
}
.addButton {
    font-size: 1.3rem;
    border: 0;
    background: var(--colorButton);
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    cursor: pointer;
}