[IE9] getElementsByClassName et textAlign = sans effet
Bonjour,
je rencontre actuellement un "BUG" IE9, voici un exemple que vous pouvez tester:
Code:
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.
