J'ai même changé l'unité de rem更改为PX (recommandé dans une autre question similaire à mon problème), toujours le même problème, je l'ai vérifié sur différents navigateurs, chaque navigateur a ce problème mais leur comportement et l'écart qu'ils créent à différentes tailles d'échelle sont différents . De plus, je n'ai aucun problème à répondre aux points d'arrêt ou aux tailles, tout fonctionne bien.

Relation entre et zoom avant ou arrière basé sur MDN视口 :

Votre fenêtre comprend tout ce qui est actuellement visible, en particulier la section "Qu'est-ce qu'une fenêtre" et peut-être certains menus de navigation. La taille de la fenêtre d'affichage dépend de la taille de l'écran, du fait que le navigateur soit en mode plein écran et du fait que l'utilisateur ait zoomé.

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

viewport 和 rem Relation entre :

Pour les pages Web réactives, la taille des éléments de la page Web change en fonction de la taille de la fenêtre d'affichage. CSS vous permet de déclarer la taille des polices en utilisant des unités absolues telles que les pixels (px) ou des unités relatives telles que les unités de pourcentage, em ou rem.

https://blog.hubspot.com/website/css-rem#:~:text=Rem%20(short%20for%20%E2%80%9Croot%2D,1rem%20will%20also%20equal% 2016 pixels

La question est donc la suivante : étant donné que plusieurs navigateurs se comportent différemment, ce bouton est-il repositionné en raison d'un zoom avant ou arrière, a-t-il quelque chose à voir avec la structure ou la programmation du navigateur, ou est-ce simplement autre chose, et quelle est la logique derrière cela ?

/*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>

Image :

C'est une taille à 100%, tout va bien

C'est 90 % de la taille à l'échelle avec un espace en haut

C'est 80% de la taille zoomée et tout est redevenu normal !

Le même résultat se produit lors du zoom avant, donc si ce problème est lié à mon code, pourquoi n'est-il pas constant dans chaque taille de zoom, s'il n'est pas lié à mon code, que se passe-t-il dans les coulisses ? < /p>