Bordure 1px est moins large qu'un px

Bonjour à tous,

Je suis à créer une application web pour gérer des pièces de travail dans une grille horaire journalière.

Sous forme de graphique, j'ai à gauche la liste de mes employés, en haut j'ai les heures d'une journée commençant à 6h00 jusqu'à 26h00 (2h00 du matin).

La grille horaire à besoin d'être ultra précise, j'ai donc mis 1 pixel pour chaque minute, ce qui nous fait 60 pixels par heure. Pour faire une belle séparation et avoir un repère visuel, j'ai enlevé 1 pixel à mon div que j'ai remplacé par une bordure d'un pixel. Logique non ?

Et bien voilà que je m'aperçois qu'une bordure d'un pixel = 0.8 px.

Au début de la journée (6h00 jusqu'à 8h00), le décalage n'est pas perceptible, mais rendu à 24h00 le décalage est très présent.

Je peux contourner le problème en mettant un background qui a les bonnes proportions, mais j'aimerais quand même comprendre pourquoi qu'une bordure 1px égale à 0.8px.

Voici un peu de code et le résultat pour une pièce de travail de 20h00 à 24h00:

Code:

---

1 2 3 4 5

.heure{ width:59px; height: 400px; border-left: solid 1px black; }

---

Résultat (zoomé pour bien voir) :
Pièce jointe 230575

La ligne noire est ma bordure, la ligne rouge est l'image en arrière plan.

Le détail que Chrome me donne :
Pièce jointe 230569

Merci de m'aider à comprendre et peut-être résoudre mon problème.

Bonjour,

je ne saurais pas te dire pourquoi 1px = 0.8px, mais...

• 1h = 60 minutes
• 1 minute = 1px

Même si tu mets une bordure, il n'y a pas de raison que le div fasse 59px : tu perds forcément 1 minute par heure !
Donc : pas logique.

Une solution box-sizing :

Code:

---

1 2 3 4 5 6 7 8

.heure{ width:60px; height: 400px; border-left: solid 1px black; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

---

Citation:

---

border-box
Les propriétés width et height incluent le contenu, le remplissage (padding), la bordure, mais pas la marge.
C'est le modèle de boîte utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks).
La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser border-box pour faire disparaître l'élément.
Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (padding) et du contenu.

---

C'est logique si la bordure n'est pas incluse dans le calcul de la largeur de la boîte. Dans mon cas, la bordure n'est pas incluse, donc si j'ajoute le 1px à un conteneur de 60px, ça me fait 61px. C'est le pourquoi du 59px + 1px de bordure = 60px.

D'où mon problème que la bordure ne fait pas 1px complet.

J'ai essayé avec le box-sizing que je ne connaissais pas et ça fonctionne bien. De ce que je comprends c'est que cette propriété inclue la bordure et fait en sorte que le div fait 59.2px plus la bordure de 0.8px ce qui fait 60px tout rond.

J'obtient le même résultat si je mets 59.2px de large pour mon conteneur.

Merci pour ton soutient et ta piste de solution.