Cycle IE7 layer - PullRequest
Новая
       13

Cycle IE7 layer

0 голосов
/ 14 марта 2011

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

Проблема в режиме совместимости в IE: окно, похоже, теряет свой z-индекс и оказывается за кадром. Работает в IE8, Opera, Chrome и Firefox.

Я попытался удалить 2 изображения, чтобы отображалось только 1 изображение, а затем по какой-то причине это работает и в режиме совместимости. Я пытался удалить пробелы между тегами img, но безуспешно, поле: 0; отступы: 0, но не повезло

У кого-нибудь есть идеи, что может быть не так?

КОД CSS 

#Content {
    width: 950px;   
}
#NewsWrapper {
    position: relative;
    padding: 0;
    margin: 0;
    top: 0;
}
#NewsListning {
    float: right;
    height: 200px;
    margin: 0;
    padding: 10px;
    background: yellow;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 12;
    width: 300px;
}
#SlideImages {
    width: 100%;
    margin: 0; 
    padding: 0; 
    float: left; 
    z-index: 11;
}
.SlideImage {
    display: inline;
    float: left;
    padding: 0;
    margin: 0;
    z-index: 11;
}

Код JavaScript 

$(function () {
  $('#SlideImages').cycle({
    fx: 'fade',
    speed: 5000
  });
});

HTML-код 

<div id="Content">
<div id="SlideImages">
    <img src="/Images/Slide1.jpg" class="SlideImage" />
    <img src="/Images/Slide2.jpg" class="SlideImage" />
    <img src="/Images/Slide3.jpg" class="SlideImage" />
</div>

<div id="NewsWrapper">
  <div id="NewsListning">
    <div>
      <strong>Test 2</strong> 
      Lorem ipsum
    </div>
  </div>
</div>
  • решено - ДОПОЛНИТЕЛЬНЫЕ ЗАМЕЧАНИЯ *

Во всех браузерах, кроме IE7, вам нужно указать, например, top: 0; left: 0, если вы собираетесь использовать position: absolute. Иначе это обычно заканчивается справа от сайта. Еще одна вещь, которая не имеет смысла, когда дело доходит до IE7.

1 Ответ

1 голос
/ 14 марта 2011

Поместите ваш #NewsWrapper как более высокий индекс, чем # NewsListing

Это должно работать

Кроме того, я не смотрел код для цикла, но я предполагаю, что он использует более высокий z-index чем 12. Вероятно, вы захотите использовать z-index> 1000 для чего-то, что вы хотите быть самым передовым на экране.

Мне просто было очень трудно с подобной проблемой.(CSS Drop Down, идущий под баннером) Я использовал CSS, чтобы в конце концов исправить это, изменил родительский div с целой навигацией на position:absolute и действительно высокий z-index, но я протестировал это и этоработал очень хорошо.

...