[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" />

[IE9] getElementsByClassName et textAlign = sans effet

jQuery

Discussions similaires

Partager

Partager