Jan. 2021

« whitespace » en fin de ligne sur FireFox

On est face à un problème de gestion du « whitespace » existant en fin de ligne écran et qui est pris en compte de façons différentes suivant les moteurs de rendu.

Avec « whitespace »

En mettant une bordure à gauche on voit la position du début de l'élément. qui est pris en compte différemment par les moteurs de rendu.

flux normal display:inline-block sur les labels display:inline-flex sur le conteneur

Code CSS appliqué

.wrapper {
}
.wrapper label {
  border-left: 2px solid #F00;
}

.wrapper {
}
.wrapper label {
  border-left: 2px solid #F00;
  display: inline-block;
}

.wrapper {
  display: inline-flex;
  flex-wrap: wrap;
}.wrapper label {
  border-left: 2px solid #F00;
}

Sans « whitespace »

Error