Discussion :

[dominos]

Bonjour,

Le code suivant est des plus simple, mais je constaste un décalage entre différents navigateurs, l'illustration montre les résultats et un zoom où on voit ces décalages.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<style>
label.test {
font-family: verdana, arial, sans-serif;
font-size: 12px;
}
</style>
 
<input type="checkbox"> <label class="test">Texte décalé verticalement<label>

Connaissez-vous une solution à ce problème ?

Ce qu'est curieux, c'est que même sans la balise label, ce décalage existe,
et « line-height » sans résultat

Merci des conseils.

[miss_socrates]

S'il y a bien un décalage vertical, on peut utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

vertical-align: top ou middle ou bottom;

en corrélation avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

line-height:

pour spécifier la hauteur du texte.

[dominos]

Merci, j'ai essayé différentes possibilité, il y toujours plus ou moins une différence. Avec le code suivant, seul IE6 et 7 présente une différente de 3px.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
label.test {
	vertical-align: top;
	line-height: 18px;
}

et avec celui-ci, différence de 1px sou Firefox :

l

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
abel.test {
	vertical-align: top;
	line-height: 19px;
	position: absolute;
}

Sauf si je passe « line-height: 18px; » uniquement pour Firefox, mais je ne sais pas s'il est possible de désigner cette nuance dans un fichier CSS...

Auriez-vous une autre solutions à proposer ?

[dominos]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
label.test {
	vertical-align: top;
	line-height: 18px;
 
}
* html label.test { /* IE6 et supérieur */
	line-height: 19px;
	position: absolute;
}
*+html label.test { /* IE7 et supérieur */
	line-height: 19px;
	position: absolute;
}