IE6 png bug; ссылки не работают?

Question

Через много часов я выяснил, почему ссылки в моих pngs в IE6 не работают.
Это потому, что я использую фильтр: progid: dximagetransform.microsoft.alphaimageloader в моем CSS. И все же спустя много часов я не нашел решения для исправления этих ссылок.

Вот мой код ...

HTML

<div id="fullwidth-header-wrapper">
  <div id="header"> <strong class="logo"> <a href="#">Google</a> </strong>
    <div id="nav">
      <ul> 
<span>
<span style="color: white;">Prefer</span>
Google? Click
<a href="http://google.com">here!</a>
</span>

       </ul>
    </div>
  </div>
</div>

CSS

#fullwidth-header-wrapper {
    height: 120px;
    }

#header {
      background:url(../images/header-bg.png) no-repeat 50% 0;
    height: 138px;
    width: 980px;
    margin: 0 auto;
    position: relative;
    top:0;
}

.logo{
    background:url(../images/logo.png) no-repeat;
    display:block;
    width:500px;
    height:125px;
    position:absolute;
    top:40px;
    left:85px;
}
.logo a{
    display:block;
    width:323px;
    height:85px;
    text-indent:-9999px;
    overflow:hidden;
}




#nav {
background:url(none.gif);
filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/nav.png',  sizingmethod='crop');
display: inline;
position: absolute; 
top: -8px;
right: 30px;
width: 350px;
    height: 75px;
z-index: 150;
} 

#nav ul {
    position: relative;
    top: 18px;
    left: 0px;
    color: rgb(87, 175, 237);
    font-size: 96.8%;
    z-index:200;
}

#nav span {
           color: #fff;
           position: absolute; 
           top: 18px; 
           left: 0px;  
           font-size: 96.8%;
}

#nav a {color: rgb(255, 255, 255);}

Как вы решаете эту проблему или избегаете ее и предложений относительно возможного решения для вышеупомянутого?

Спасибо!

Answer 1

Попробуйте это: http://www.hrunting.org/csstests/iealpha.html

Короче говоря:

Важно то, что элемент с фильтром не имеет установленной позиции , а ссылка в фильтруемом элементе имеет набор позиций . В этом случае ссылки внутри фильтруемого элемента будут работать.

Так как ваш элемент #nav имеет position: absolute, вам нужно добавить оберточный div вокруг него и расположить его абсолютно.

Answer 2

У меня была похожая проблема, я использовал прозрачный фон, поэтому мне пришлось применить исправление png. У меня был div и ссылка вокруг него, вот так:

<a href="#"><div id="bla"></div></a>

Ссылки не работали вообще в IE6. Когда я применил позицию: по отношению к тому бла диву, это сработало! положение: родственник, кажется, творит чудеса на IE6, а также плавает: иногда оставлял ...

Answer 3

Это часто проблема с использованием исправления png для чего-то, что содержит ссылки, альфа-версия исправления twinhelix png, по-видимому, решила эту проблему. Я использовал его, он еще немного глючит или, по крайней мере, это было несколько месяцев назад, но использовался прямо на небольших площадках, он готов к производству http://www.twinhelix.com/css/iepngfix/.

Обычно я использую скрипт twinhelix 1.0 для всех наших сайтов, я включаю таблицу стилей ie6.css с условным комментарием, нацеленным на IE6:

<!--[if lt IE 7]>
  <link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8">
<![endif]-->

Внутри вас в CSS вы просто называете это с помощью правила behavior. IE 7 и 8 делают прозрачные PNG просто отлично. Вам нужно убедиться, что у вас есть прозрачный gif размером 1px на 1px где-то в формате blank.gif и обновить файл htc (который на самом деле просто JS), чтобы связать путь к этому изображению.

#nav  {
    behavior: url(/css/iepngfix.htc);
}

Надеюсь, это поможет