2015-02-25 3 views
0

Le problème semble être que IE (9-edge) bloque seulement une partie de mon javascript qui est en cours de définition. Bien que je puisse supprimer les paramètres de sécurité pour afficher l'effet désiré, je ne peux pas demander aux utilisateurs de faire la même chose. Je suis sûr qu'il manque quelque chose ici puisque le reste du code est affiché correctement.IE ne pas afficher la couleur de fond sur div

$.each(data.results.audio, function(key, val) { 
    var replace = val.mp3Url.replace('&', '&'); 

    if (val.imgUrl) { 
     status = "style='background:"; 
     switch (val.roadCondition) { 
     case "1": 
      status += "#4CAF50'"; // green 
      break; 
     case "2": 
      status += "#FFEB3B'"; // yellow 
      break; 
     case "3": 
      status += "#D32F2F'"; // red 
      break 
     case "4": 
      status += "black'"; // black 
      break; 
     default: 
      status += "white'"; // white 
     } 
    } 

    var items2 = "<div class='bt_icon z-depth-5 hvr-round-corners'" + status + "><p class='shine waves-effect waves-green hvr-round-corners'><img id='" + key + "' class='majors ' src='" + val.imgUrl + "' alt='" + val.name + "' title='" + val.name + "' data-audio='" + replace + "' /></p></div>"; 
    $("#button_icons").append(items2); 
    if (first && !isDone) { 
     isDone = true; 
     var audio = document.querySelector("audio"); 
     audio.src = replace; 
     audio.load(); 
    } 

    items.push(items2); 

}); 

REMARQUE: la couleur de fond a le même effet.

Le reste du code fonctionne correctement, sauf que la variable "status" est définie. Chrome, Firefox et Safari s'affichent correctement. Mais sur IE, il semble que le code "status" ci-dessus ne soit jamais injecté. Il n'apparaît pas dans les outils dom de dev. La seule façon d'afficher tout le code est de laisser les paramètres de sécurité sur moyen et de recharger la page. Des explications/corrections?

+0

peut-être besoin d'IE les guillemets autour de la valeur des attributs afin de les appliquer –

+0

La sortie est interprétée comme une double citation. Au moins autant que je sache dans le DOM de chrome, firefox et Safari. Bonne pensée cependant. – messif

+1

classe et le style (qui ne devrait pas être en ligne ...) se touchent sans espace entre les deux. C'est certainement assez pour faire tomber IE. –

Répondre

0

Il s'avère que la réponse était dans la balise META pour la compatibilité IE. Lorsque IE exécute un contenu intranet non sécurisé, il passe par défaut en mode de compatibilité. Voilà ce que j'avais:

<meta http-equiv="X-UA-Compatible" content="IE=EDGE; IE=9; IE=8"/> 

C'est ce que je l'ai changé:

<meta http-equiv="X-UA-Compatible" content="IE=EDGE"/> 

Il y a une grande explication sur la raison pour laquelle cela a causé mon problème ici: IE Compatibility Mode: 'X-UA-Compatible' tag 'Edge'

+0

Cela m'a pris plusieurs fois - me rend fou. –