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 html : 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
<!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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.