Проблема отображения Jquery в IE

Question

У меня есть своего рода решение с вкладками, встроенное в jquery. Когда пользователь щелкает вкладку, я получаю идентификатор этой вкладки и показываю правильное содержимое для этой вкладки на основе идентификатора. Он отлично работает в Firefox, при нажатии на вкладку скрывает все div с классом «Страница», а затем показывает нужную страницу.

В IE8 это также работает так же, НО происходит странная вещь, иногда некоторое содержимое другой страницы отображается поверх содержимого активной страницы. Так что, если я нажму Tab1, он покажет cotent of Page1, но также появятся удивительные кнопки из Page2. При наведении курсора мыши на удивительную кнопку, которой там быть не должно, она исчезает, поэтому это похоже на проблему «графика / отображение». Это не происходит все время, иногда это работает так, как должно.

Кто-нибудь видел проблему, подобную этой, и есть ли решение?

Это код в jquery, HTML и 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

Было бы полезно узнать, как выглядит ваш CSS. попробуйте добавить z-index: 10 к отображаемому в данный момент div.

Answer 2

Это может быть связано с ошибкой IE z-index. Я знаю, что IE6 и 7 имеют проблемы с отображением содержимого неправильно по отношению к z-index. Быстрый поиск в Google может пролить свет на это, так как есть некоторые обходные пути с jQuery

Answer 3

Имеется ли на вашей странице действительный тип документа ? Похоже, что где-то на вашей странице может быть какой-то искаженный HTML?

Answer 4

Я бы соблазнился сделать:

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);
}

Таким образом, вы знаете, что все страницы всегда скрыты.

Answer 5

Может быть ошибка IE8, это не первый случай, когда что-то в IE прыгает вперед, когда этого не должно быть.

Также, пожалуйста, обратите внимание на этот вопрос: Z-index не работает в IE8?

Answer 6

Я не мог точно воспроизвести проблему, с которой вы столкнулись, но я заметил проблему в вашем JavaScript. Когда вы устанавливаете z-index, ваш пример кода выглядит так:

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

Вам не нужно двоеточие после 'z-index' - оно должно быть таким:

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

Я не знаю, решит ли это вашу проблему или нет.

Answer 7

Попробуйте отображение: нет вместо отображения: скрыто