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 CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 .heure{ width:59px; height: 400px; border-left: solid 1px black; }
Résultat (zoomé pour bien voir) :
La ligne noire est ma bordure, la ligne rouge est l'image en arrière plan.
Le détail que Chrome me donne :
Merci de m'aider à comprendre et peut-être résoudre mon problème.
Partager