problème avec IE CSS/JS

Question

J'ai un site Magento en utilisant JS (prototype) pour afficher le contenu à onglets sur les pages produits, comme celui-ci: http://persianrose.co.uk/index.php/face/rose-day-cream.html

Son un moyen simple JS changer la propriété d'affichage CSS basé sur l'onglet actif , mais le contenu textuel dans le conteneur d'onglet ne s'affiche pas pour certains utilisateurs. [NB?] Certains utilisateurs disent qu'ils peuvent voir les onglets s'ils actualisent la page?

Il n'existe aucun modèle tel que tous les utilisateurs d'une version particulière de IE; Je l'ai réduit à certaines personnes qui utilisent IE 7 et IE8. Certains pas. Je n'ai pas été en mesure de recréer le problème dans mes versions de ces navigateurs, je m'appuie donc sur les commentaires des associés pour savoir si les choses que j'ai essayé ont fonctionné, ce qui n'est pas le cas jusqu'à présent. D'après les tests de ces utilisateurs, il y a eu des cas où deux utilisateurs ont des versions littéralement identiques d'Internet Explorer, mais une affiche le contenu du conteneur d'onglets correctement et l'autre ne peut pas le voir.

J'ai essayé de patcher différentes dépendances IE CSS possibles. Maintenant, je questionne mon JS? Leurs paramètres de sécurité du navigateur? Je ne sais pas. Je suis perplexe ...

Parmi les langues impliquées, je suis le moins compétent avec JavaScript, donc ce serait le premier endroit pour chercher un échec.

Voici une capture d'écran de la sortie d'un utilisateur Effectuée: http://dl.dropbox.com/u/6136148/error.jpg

Merci d'avance pour votre temps et d'efforts.

HTML:

<ul id="tabs"> 
    <li class="tab"><a href="#how-to-use">How to use</a></li> 
    <li class="tab"><a href="#ingredients">Ingredients</a></li> 
</ul> 
<div class="tab-container"> 
    <div id="how-to-use">This is a wonderful toner for use after cleansing morning and night.</div> 
    <div id="ingredients">Aqua Rosa damascena, Citral, Citronellol, Farnesol, Linalool, Geraniol.</div> 
</div> 

CSS:

ul#tabs {list-style:none; padding:0} 
ul#tabs li {float:left; margin:0 4px 0 0} 
ul#tabs a { 
    background:#fcfcfc; 
    color:#bbb; 
    display:block; 
    font-family:'ColaborateRegular'; 
    font-size:13px; 
    padding:5px 10px; 
    width:80px; 
    border:1px solid #eee; 
    border-bottom-color:#ddd; 
    position:relative; 
    text-align:center; 
    text-decoration:none; 
    z-index:99; 
} 
ul#tabs a.active-tab { 
    background:#fff; 
    color:#843549; 
    border-color:#ddd; 
    border-bottom:1px solid #fff 
} 
.tab-container { 
    padding:10px; 
    margin-top:9px; 
    width:390px; 
    height:1%; 
    min-height: 1% ; 
    border:1px solid #ddd; 
    zoom: 1; 
    position: relative; 
} 

.tab-container div {display:none} 
.tab-container div.active-tab-body, 
.tab-container div.active-tab-body div {display:block} 

JS (prototype):

var Fabtabs = Class.create({ 
initialize : function(element,options) { 
    var parent = this.element = $(element); 
    this.options = Object.extend({ 
     hover: false, 
     remotehover: false, 
     anchorpolicy: 'allow-initial' // 'protect', 'allow', 'allow initial', 'disable' 
    }, options || {}); 
    this.menu = this.element.select('a[href*="#"]'); 
    this.hrefs = this.menu.map(function(elm){ 
     return elm.href.match(/#(\w.+)/) ? RegExp.$1 : null; 
    }).compact(); 
    this.on(this.getInitialTab()); 
    var onLocal = function(event) { 
     if(this.options.anchorpolicy !== 'allow'){ event.stop(); } 
    var elm = event.findElement("a"); 
    if (elm.href.match(/#(\w.+)/)) { 
     this.activate(elm); 
     if(this.options.anchorpolicy === 'protect') { window.location.hash = '.'+this.tabID(elm); } 
     }else { 
     document.location = elm.href; 
    } 
}; 
var onRemote = function(event) { 
    if(this.options.anchorpolicy !== 'allow'){ event.stop(); } 
    var trig = event.findElement("a"); 
    if (elm.href.match(/#(\w.+)/)) { 
     this.activate(this.tabID(trig)); 
     if(this.options.anchorpolicy === 'protect') { window.location.hash = '.'+this.tabID(elm); } 
    } else { 
     document.location = elm.href; 
     } 
    } 
    this.element.observe('click', onLocal.bindAsEventListener(this)); 
    if(this.options.hover) { 
     this.menu.each(function(elm){elm.observe('mouseover', onLocal.bindAsEventListener(this))}.bind(this)); 
    } 
    var triggers = []; 
    this.hrefs.each(function(id){ 
     $$('a[href="#' + id + '"]').reject(function(elm){ 
     return elm.descendantOf(parent) 
     }).each(function(trig){ 
     triggers.push(trig); 
     }); 
    }) 
    triggers.each(function(elm){ 
     elm.observe('click', onRemote.bindAsEventListener(this)); 
     if(this.options.remotehover) { 
     elm.observe('mouseover', onRemote.bindAsEventListener(this)); 
    } 
    }.bind(this)); 
}, 
activate: function(elm) { 
    if(typeof elm == 'string') { 
    elm = this.element.select('a[href="#'+ elm +'"]')[0]; 
    } 
    this.on(elm); 
    this.menu.without(elm).each(this.off.bind(this)); 
}, 
off: function(elm) { 
    $(elm).removeClassName('active-tab'); 
    $(this.tabID(elm)).removeClassName('active-tab-body'); 
}, 
on: function(elm) { 
    $(elm).addClassName('active-tab'); 
    $(this.tabID(elm)).addClassName('active-tab-body'); 
}, 
tabID: function(elm) { 
    return elm.href.match(this.re)[1]; 
}, 
getInitialTab: function() { 
    if(this.options.anchorpolicy !== 'disable' && document.location.href.match(this.re)) { 
     var hash = RegExp.$1; 
     if(hash.substring(0,1) == "."){ 
     hash = hash.substring(1); 
     } 
     return this.element.select('a[href="#'+ hash +'"]')[0]; 
    } else { 
     return this.menu.first(); 
    } 
}, 
re: /#(\.?\w.+)/ 
}); 
document.observe("dom:loaded", function(){ new Fabtabs('tabs'); }); 

Answer 1

Vous avez tout à fait une erreur manifeste là. Dans la ligne 16, vous essayez d'accéder à this.element pour accéder à vos éléments a. Cependant, IE vous dit this.element est rien (null). Donc, je suppose qu'il va mal avec l'attribution:

var parent = this.element = $(element); 

Pour vérifier, vous pouvez simplifier:

var myElement = $(element); 

attribuant ainsi un var avec l'élément que vous avez passé dans la fonction initialize. Ensuite, vous pouvez vérifier si elle est là aussi loin que votre navigateur est concerné:

console.info(myElement); 

ouvrir votre console et vérifier ce qu'il dit. Si cela dit encore null alors vous devez creuser plus profondément. Quand il ne passe pas la ligne 16, il ne se connecte à aucun élément, alors essayez si vous pouvez obtenir un autre élément comme un test. Si cela échoue, il se peut que vous soyez bloqué en traversant le DOM ou que vous ayez des problèmes de configuration javascript/navigateur bizarres.