Pourquoi mon bouton présente-t-il un espace de 1 px en bas dans Chrome et Safari ?

Différence de sous-pixels dans le rendu des boutons dans les navigateurs

La différence dans le rendu d'un composant constitué d'un champ de saisie avec un bouton intégré provient de variations dans les calculs de sous-pixels entre les navigateurs.

Explication du problème

Firefox restitue correctement le bouton avec une hauteur de 100 % et des bordures visibles, alors que Chrome et Safari introduisent un 1px espace en bas. Ce problème se produit car Chrome arrondit les marges à des nombres entiers, ce qui entraîne une erreur de calcul de la marge inférieure du bouton.

Solution

Pour résoudre cette disparité de rendu entre navigateurs, transférez le utilisation de la marge du bouton à une bordure transparente. Définissez la bordure du bouton sur 1px et appliquez la propriété background-clip: padding-box pour empêcher la transparence d'affecter l'arrière-plan. De plus, remplacez le remplissage basé sur em par des valeurs de pixels fixes pour résoudre un bug lié au zoom dans Chrome.

Extrait de code final

<code class="css">.wrapper {
  position: relative;
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

input {
  border: 1px solid red;
  width: 100%;
  background-color: limegreen;
  line-height: 3em;
  padding: 10px;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  width: 7em;
  margin: 0px;
  background-clip: padding-box;
  box-shadow: inset 0px 0px 0px 2px black;
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!