Блог

У меня есть IE 8 и IE 7 z-index , position и другие проблемы. Я привел пример этих проблем в http://jsfiddle.net/KeEPF /. Если вы посмотрите на это через Chrome, Mozilla или другой браузер, вы заметите, что поверх большого изображения есть ссылки (с помощью link #imagemap2 ). В IE8 и IE7 это изображение всегда находится сверху, и вы не можете щелкнуть по ссылкам.

Как я могу решить эту проблему?

Вот код:

 <div id="splashbar"> 
    <div id="left_content_text"> 
        <img src="#" alt="facebook" /> 
        <h2> <a href="" style="color:#fff; text-decoration:none;">test</a></h2> 
        Lorem ipsum dolor sit amet, con tetur adipiscing elit. Etiam tincidu molestie justo, vitae dignissim me scelerisque vel. Proin vitae nibh arcu vulpu tate vehicula.<br/> 
    </div> 
    <div id="splashimages"> 
        <a href="#full_header_link" class="full_header_link"> 
            <img width="738" height="191" src="tet" class="attachment-post-thumbnail wp-post-image" alt="header_forside" title="header_forside" />                                            </a> 
        <a href="#imagemap1" style="width:100px;height:100px;left:0px; top:10px" class="imagemap_header_link"> </a> 
        <a href="#imagemap2" style="width:100px;height:100px;right:0px; top:10px" class="imagemap_header_link"></a> 
    </div> 
    <div class="clear"> 
    </div> 
</div> 
  

 #splashbar {
    position: relative;
    zoom: 1;
    z-index: 2;
}
#splashimages {
    position: relative;
    top: 0;
    right: 0;
    z-index: 2;
    zoom: 1;
}
#splashimages img {
    z-index: -5;
    position: absolute;
    right: 0;
    top: 0;
    visibility: visible;
    display: block;
    height: 173px;
    zoom: 1;
}
#splashimages .imagemap_header_link {
    position: absolute;
    display: block;
    z-index: 990;
    visibility: visible;
    zoom: 1;
}
  

это можно исправить с помощью небольшого обмана..

IE не нравится тот факт, что на ваших 2 ссылках «imagemap» нет фона, хотя я предполагаю, что вы хотите, чтобы они были прозрачными, поскольку такова идея карты

это работает для меня:

 #splashimages .imagemap_header_link {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;

  background: #dad; /* any color */
  filter:alpha(opacity=0); /* make it transparent in IE again */
  opacity: 0; /* make it transparent for good browsers */
}
  

Рабочий пример

добавлено: для справки, в рабочем примере удалены все ненужные дополнительные свойства, нет необходимости устанавливать zoom: 1; ни в одном из divs, абсолютно позиционированные из них уже имеют «hasLayout»