Problème d'affichage Jquery dans IE

Question

J'ai une sorte de "tabulation" intégrée à jquery. Lorsqu'un utilisateur clique sur un onglet, j'obtiens l'identifiant de cet onglet et affiche le bon contenu pour cet onglet en fonction de l'identifiant. Cela fonctionne parfaitement dans Firefox, quand l'on clique sur l'onglet, il masque toutes les divs avec la classe "Page", puis affiche la bonne Page.

Dans IE8, cela fonctionne également de la même façon MAIS une chose étrange se produit, parfois du contenu d'une autre page est affiché sur le contenu de la page active. Donc, si je clique sur Tab1, il montre cotent de Page1 mais les boutons impressionnants de Page2 apparaissent également. Lorsque vous faites glisser la souris sur le bouton génial qui ne devrait pas être là, il disparaît, il semble donc être une sorte de "graphique/affichage" problème. Cela n'arrive pas tout le temps, parfois ça marche comme il se doit.

Est-ce que quelqu'un a vu un problème comme celui-ci et existe-t-il une solution?

Ceci est le code jquery, le code html et css:

$(document).ready(function() { 

$('.Pages').hide(); 

$('.Tab').click(function() { 
    var isActive = $(this).hasClass('TabActive'); 
    var pages = $(this).closest('div').prev('div'); 
    var tabs = $(this).closest('div'); 
    $(".Page").hide(); 
    $(".Page").css({ 'z-index:': '0' }); 
    $(".Tab").removeClass('TabActive') 


    //Toggle Open/Close 
    if (isActive || pages.is(":hidden")) { 
     pages.animate({ width: "toggle" }, 200); 
    } 

    //Show the content 
    var id = this.id.substring(3, 4); 
    $('#Page' + id).show(); 
    $("#Page" + id).css({ 'z-index:': '999'}); 

    //Mark the tab as active 
    if (!isActive) { 
     $(this).addClass('TabActive'); 
    } 
}); 
}); 

HTML:

<div class="Pages"> 
    <div id="Page1" class="Page"> 
     Content 1 
     <a class='medium green awesome' href='test.html'>Test</a> 
    </div> 
    <div id="Page2" class="Page"> 
     Content 1 
     <a class='medium green awesome' href='test.html'>Test</a> 
    </div> 
</div> 
<div class="Tabs"> 
    <ul> 
     <li class="Tab" id="Tab1">Tab1</li> 
     <li class="Tab" id="Tab2">Tab2</li> 
    </ul> 
</div> 

CSS:

div .Pages 
{ 
    width: 300px; 
    min-height: 350px; 
    background: #fff; 
    border: solid 1px #333; 
    position: relative; 
    float: left; 
    overflow: hidden; 
    padding: 20px; 
} 

div .Page 
{ 
    width: 100%; 
    z-index: 0; 
} 

div .Tabs 
{ 
    float: left; 
    margin: 10px 0px 0px 0px; 
} 

.Tabs ul 
{ 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
} 

.Tabs li 
{ 
    padding: 0px; 
    margin: 0px 0px 10px 0px; 
} 

.Tab 
{ 
    margin: 0px 0px 0px 0px; 
} 

.TabActive 
{ 
    color: red; 
} 


//THESE BUTTONS ARE THE ONES THAT SHOWS UP WRONG: 
//GOT THESE FROM: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba 

.awesome, .awesome:visited { 
background: #f9f9f9 url(/images/alert-overlay.png) repeat-x; 
display: inline-block; 
padding: 5px 10px 6px; 
color: #fff; 
text-decoration: none; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
text-shadow: 0 -1px 1px rgba(100,100,100,0.1); 
border-bottom: 1px solid rgba(0,0,0,0.1); 
position: relative; 
cursor: pointer; 
} 

.medium.awesome, .medium.awesome:visited  { font-size: 11px; font-weight: bold; line-height: 1; } 
.green.awesome, .green.awesome:visited  {  background: url(images/buttons/greenbuttonbg.png) repeat-x 0 0; } 

Answer 1

It w Aidez-nous à savoir à quoi ressemble votre CSS. essayez d'ajouter un z-index: 10 à la div actuellement affichée.

Answer 2

essayer display: none au lieu d'affichage: caché

Answer 3

Je serais tenté de le faire:

if(!$(this).hasClass('TabActive')) 
{ 
    // Hide/show pages 
    $('.Page').hide(); 
    $('#Page' + this.id.substring(3, 4)).show(); 

    // Show Pages 
    pages.animate({ width: "toggle" }, 200); 

    // Deal with active classes 
    $(".TabActive").removeClass('TabActive'); 
    $(this).addClass('TabActive'); 
} 
else 
{ 
    if($(".Pages").is(":hidden")) 
    pages.animate({ width: "toggle" }, 200); 
} 

De cette façon, vous savez toutes les pages sont toujours en cours cachées.

Answer 4

Votre page a-t-elle un valid doctype? On dirait qu'il peut y avoir un HTML malformé quelque part dans votre page?

Answer 5

Je ne pouvais pas tout à fait reproduire le problème que vous avez, mais j'ai remarqué un problème dans votre JavaScript. Lorsque vous définissez le z-index, vous exemple de code ressemble à ceci:

$(".Page").css({ 'z-index:': '0' }); 

Vous n'avez pas besoin du côlon après 'z-index' - il devrait ressembler à ceci:

$(".Page").css({ 'z-index': '0' }); 

I Je ne sais pas si cela va résoudre votre problème ou non.

Answer 6

Ceci peut être lié au bogue IE z-index. Je sais que IE6 et 7 ont tous deux des problèmes avec l'affichage du contenu erroné en ce qui concerne l'index z. Une recherche rapide sur Google pourrait faire la lumière sur ce sujet car il ya un peu de travail avec jQuery

Answer 7

Pourrait être un bug IE8, ce n'est pas la première fois que quelque chose dans IE saute à l'avant quand il ne devrait pas avoir.

également s'il vous plaît butin à cette question: Z-index broken in IE8?