[IE9] getElementsByClassName et textAlign = sans effet

dtcSearch · 11/10/2011, 17h28

Bonjour,

je rencontre actuellement un "BUG" IE9, voici un exemple que vous pouvez tester:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   		<title>Test - Text Alignement IE9</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<style>
.align-left
{
	text-align: left;
}
.align-center
{
	text-align: center;
}
.align-right
{
	text-align: right;
}
		</style>
  </head>
  <body>
	<div>
		<fieldset>
			<legend>CSS</legend>
			<label>text-align: left:   <input type="text" class="align-left"   value="essai"></label><br />
			<label>text-align: center: <input type="text" class="align-center" value="essai"></label><br />
			<label>text-align: right:  <input type="text" class="align-right"  value="essai"></label><br />
		</fieldset>
		<fieldset>
			<legend>STYLE ELEMENT</legend>
			<label>text-align: left:   <input type="text" style="text-align: left;"   value="essai"></label><br />
			<label>text-align: center: <input type="text" style="text-align: center;" value="essai"></label><br />
			<label>text-align: right:  <input type="text" style="text-align: right;"  value="essai"></label><br />
		</fieldset>
		<fieldset>
			<legend>jQuery</legend>
			<label>text-align: left:   <input type="text" class="left"   value="essai"></label><br />
			<label>text-align: center: <input type="text" class="center" value="essai"></label><br />
			<label>text-align: right:  <input type="text" class="right"  value="essai"></label><br />
		</fieldset>
<script>
$(document).ready(function ()
{
	$('.left').change(function ()
	{
		align(this, 'left');
	});
	$('.left').css('text-align',   'left');
	$('.center').change(function ()
	{
		align(this, 'center');
	});
	$('.center').css('text-align', 'center');
	$('.right').change(function ()
	{
		align(this, 'right');
	});
	$('.right').css('text-align',  'right');
});
 
function align(element, alignement)
{
	$(element).css('text-align', alignement);
}
</script>
	</div>
  </body>
</html>

Ici on passe par jQuery, mais plus généralement, même avec getElementsByClassName ou autres getElementById c'est sans effet.
Pour y voir un effet, il faut modifier le contenu de l'input.

Sous les autres navigateurs ça fonctionne (IE8, FF, Chrome...), pour que ça fonctionne sous IE9, il faut passer en mode Quirks.

Auriez vous une idée du pourquoi et du comment?

En vous remerciant.

Bovino · 11/10/2011, 17h47

Ben... en l'occurrence, c'est IE9 qui a le bon comportement, si l'on en croit le W3C : http://www.w3.org/TR/CSS21/text.html#propdef-text-align

La propriété text-align est supposée s'appliquer aux éléments de type block, ce que n'est pas un input...

dtcSearch · 12/10/2011, 10h05

merci Bovino,

o_O c'est dingue que le W3C ne normalise pas le fait de pouvoir cadrer du texte dans des inputs...
Pour des montants, la saisie à droite est nettement plus propre, et le pire c'est que ça fonctionne à moitié vu que lorsqu'on modifie un input (le contenu), ça aligne "correctement" dès la première saisie sur le champ...

Personne n'a une solution?

Forcer le mode Quirks d'IE9 en est une?
C'est possible?

Bovino · 12/10/2011, 10h17

Tu peux forcer le mode IE8 avec une balise meta :

Code html :

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

<meta http-equiv="X-UA-Compatible" content="IE=8" />

11/10/2011, 17h47	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	Ben... en l'occurrence, c'est IE9 qui a le bon comportement, si l'on en croit le W3C : http://www.w3.org/TR/CSS21/text.html#propdef-text-align La propriété text-align est supposée s'appliquer aux éléments de type block, ce que n'est pas un input... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

12/10/2011, 10h05	#3
dtcSearch Membre habitué Inscription : avril 2009 Messages : 287 Détails du profil Informations forums : Inscription : avril 2009 Messages : 287 Points : 127 Points : 127	merci Bovino, o_O c'est dingue que le W3C ne normalise pas le fait de pouvoir cadrer du texte dans des inputs... Pour des montants, la saisie à droite est nettement plus propre, et le pire c'est que ça fonctionne à moitié vu que lorsqu'on modifie un input (le contenu), ça aligne "correctement" dès la première saisie sur le champ... Personne n'a une solution? Forcer le mode Quirks d'IE9 en est une? C'est possible?
	00

12/10/2011, 10h17	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	Tu peux forcer le mode IE8 avec une balise meta : Code html : Sélectionner tout - Visualiser dans une fenêtre à part <meta http-equiv="X-UA-Compatible" content="IE=8" /> __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email