IE n'inclus pas le CSS en AJAX
C'est ce qu'on lit un peu partout, sur tous les forums.
Une des solutions préconisées est de recréer les styles en JS.
En fait, il y a une méthode beaucoup plus simple que de se faire chier à recréer tous les styles en JS (surtout quand on en a beaucoup, et certains même chargés dynamiquement).
Prenons deux fichiers, donc un chargé par le premier en AJAX :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<script src="prototype.js"></script>
</head>
<body>
<div id="content"></div>
<script>
new Ajax.Updater(
'content',
'content.php',
{}
);
</script>
</body>
</html> |
Et content.php :
Code:
1
2
3
4
5
6
7
8
9
| <style>
.ok {
background : green
}
</style>
<div class="ok">
Blablablablablablabla
</div> |
Si ce code fonctionne très bien sur Firefox, ce n'est pas le cas sur IE qui ignore les styles.
Une des solutions serait de mettre les styles en ligne à la place des classes, mais ce n'est pas le but de la manoeuvre.
C'est beaucoup plus simple.
Il suffit .... de mettre la balise style à la fin :
Code:
1
2
3
4
5
6
7
8
9
| <div class="ok">
Blablablablablablabla
</div>
<style>
.ok {
background : green
}
</style> |
Et hop ça fonctionne comme par miracle. Pas besoin de technique JS à la con.
C'est le même principe pour un simple innerHTML :
Code:
1
2
3
4
5
6
7
| <script src="prototype.js"></script>
<div id="content">Texte</div>
<script>
$( 'content' ).innerHTML = '<style>.ok {background : green } </style><div class="ok">Blablablablabla</div>';
</script> |
Ne fonctionne pas.
Code:
1
2
3
4
5
6
7
| <script src="prototype.js"></script>
<div id="content">Texte</div>
<script>
$( 'content' ).innerHTML = '<div class="ok">Blablablablabla</div><style>.ok {background : green } </style>';
</script> |
Fonctionne.
Voilà pour une méthode qui fonctionne donc sur tous les navigateurs, même IE, et sans changer l'ensemble du code pour du JS.
