Problème avec IE7 JQuery, Ajax et CSS

Dans une simple page web j'ai la charge, la nouvelle HTML dans un div à l'aide de load(url)
Fonctionne bien dans la plupart des navigateurs, mais, surprise, surprise, IE7 se comporte différemment.
Tous les autres navigateurs appliquer les pages styles CSS pour le nouvellement chargée HTML mais IE7 ne fonctionne pas.

Des idées?

Ken

Mise à jour
Le nouveau code HTML est juste un fragment de code, par exemple

<div class="classname">
blah blah blah
</div>

Mise à jour je pense que je vais appeler, il est OK.
Ce n'est pas ce que je suis en train de faire, mais une version simplifiée qui reproduit le problème ...

.
.
.    
google.load("jquery", "1.3.2"); 
    google.setOnLoadCallback(function() {
       $(document).ready(function() {
         $("#nav-home").click(function() {
           $("#girc-content").load("home.html");
         });
.
.
.

Mise à jour Sur la poursuite de l'enquête, le problème semble être un peu plus bizarre que je ne le pensais.

J'ai essayé Steerpike la suggestion parce que j'ai d'abord pensé que le problème était que les styles CSS n'étaient pas appliquées.

Cependant, il apparaît aujourd'hui que seuls certains styles sont appliqués.
Par exemple, la couleur du texte de l'attribut de l' <h2> balise est appliquée, mais la largeur de l'attribut de l' <div> balise n'est pas.

  • Êtes-vous de chargement HTML morceau du même domaine?
  • Pouvez-vous poster un cutdown jquery fragment?
  • Vous voulez entendre quelque chose d'effrayant? Après 8 minutes, cette question montre déjà dans une recherche Google...
  • Je ne peux pas reproduire votre problème à l'aide de votre code fourni. À l'aide de votre code javascript à charger mon test contenu a IE7 (en fait, IE8 en 7 mode) appliquer les styles CSS je l'ai donné sans problème. Il doit y avoir quelque chose sur le code HTML que vous essayez de charger ou peut-être vos règles CSS?
  • Et ouais, clet, c'est assez fou, bien que je pense que quand j'y pense pas très surprenant - j'imagine que google reconnaît la qualité du contenu est ici en général et la façon dont rapidement les changements, du sens qu'ils avaient araignée avec une régularité alarmante 🙂
  • Jeff a fait des commentaires dans le blog ou codinghorror (ne me souviens pas qui) qui 70% de l'achalandage du site est google analyse.
  • Avoir plus de la réelle balisage sémantique et spécifique de règles css utilisé serait susceptible d'aider si vous rencontrez toujours des difficultés à trouver la solution, kenneedham
  • Je crée un petit exemple qui présente le même problème

InformationsquelleAutor kenneedham | 2009-03-27
  1. 2

    À la lumière d'informations supplémentaires, prendre 2...

    Les styles sont pas appliquées dans la master page HTML ou la page que vous êtes en train de charger? Si ils sont dans la page que vous êtes en train de charger, il semble que IE bandes de script et les balises de style de l'affichage des objets XMLHttpRequest.

    Étant donné que ce n'est pas cela et je suis intrigué, j'ai construit un échantillon:

    <html>
<head>
<title>test</title>
<style type="text/css">
#girc-content { border: 1px solid black; width: 100px }
h3 { color: red; }
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2"); 
google.setOnLoadCallback(function() {
  $(document).ready(function() {
    $("#nav-home").click(function() {
      $("#girc-content").load("test2.html");
    });
  });
});
</script>
</head>
<body>
<div id="girc-content">
blah blah blah
</div>
<input type="button" value="click me" id="nav-home">
</body>
</html>

    et test2.html:

    <html>
<head>
</head>
<body>
<h3>This is a test</h3>
</body>
</html>

    Cela fonctionne parfaitement pour moi dans IE8 normes et le mode de compatibilité (désolé, pas de IE7 plus).

    J'ai remarqué que lorsque j'ai copié votre google onload de l'extrait que vous avez été absent quelques clôture des accolades/parenthèses. Était-ce juste un couper-coller de l'erreur ou un problème avec votre Javascript? Elle pourrait expliquer le comportement incohérent.

    • J'ai seulement référence à la feuille de style externe dans la partie statique de ma page. Le HTML qui est chargé dynamiquement n'a pas de telles références, mais qui utilise les styles définis dans la partie statique. Il n'y a pas de script dans la partie dynamique.
    • Vous pouvez revenir IE8 pour revenir à 7 à l'aide des Outils > Développeur Outils > Mode Navigateur > Internet Explorer 7. L'équipe IE a dit que la mode est fonctionnellement identique au réel IE7, mais apparemment il y a de légers écarts.
    • Ah je savais que j'avais entendu parler quelque part. Essayé, même affaire. fonctionne très bien.
    • J'ai modifié le code de l'échantillon ressemble plus à ce que j'ai et il fonctionne toujours dans IE7. Ce qui, je pense, signifie qu'il ya quelque chose de mal avec mon CSS template. J'aurais pensé plus tôt. Le fait que le <h2> tage fonctionne, mais le <div> qui n'est pas aurait dû être un indice. Merci pour l'aide.
    • Trouvé. J'ai eu une border="0"; dans l'un des styles Les autres navigateurs ne semblent pas à l'esprit, mais IE est juste arrêté pour l'application de tous les styles à partir de ce point. Je vais vous donner la TIQUE le plus à vos questions m'ont amené à regarder dans le bon endroit. Merci encore
    InformationsquelleAutor cletus
  2. 2

    Essayer 'toucher " le contenu une fois que vous chargez. La façon la plus simple tend tout simplement à ajouter une chaîne nulle à la innerHTML

    $("#nav-home").click(function() {
    $("#girc-content").load("home.html");
    $("#girc-content")[0].innerHTML += '';
});
    InformationsquelleAutor Steerpike
  3. 2

    Le lien m'a aidé, pour l'essentiel, l'ajout de la balise style dans la tête, même de façon dynamique, applique les styles par ie. J'ai ajouté ce haut de la onready gestionnaire et cela a bien fonctionné.

    http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

    $("head").append("<link>");
css = $("head").children(":last");
css.attr({
  rel:  "stylesheet",
  type: "text/css",
  href: "/javascripts/jwysiwyg/jquery.wysiwyg.css"
});
    InformationsquelleAutor Micah Topping
  4. 1

    J'ai eu le même problème - IE8 a parfois un problème avec appliquer des styles de contenu chargé en ajax jQuery fonction. Je ne sais pas pourquoi, mais cela m'a aidé:

    $.ajax({
url: 'content.html',
success: function(data) {
   $('#content').html(data); //styles doeas not appear in ie8
   document.getElementById('content').innerHTML = data; /* ie8 - now it works oO */
}
    • Je pourrais savoir pourquoi, parce que innerHTML va forcer le navigateur à rendre DOM nouveau.
    InformationsquelleAutor Erroid