CSS-оверлей не работает в IE6 - PullRequest
0 голосов
/ 22 июля 2011

У меня есть DIV, который относительно позиционирован.Весь DIV должен ссылаться на другую страницу.

Что я делаю, так это добавляю ссылку в div и применяю к нему этот CSS:

.f170region .linkcover {
    background: #FFF;
    bottom: 0;
    display: block;
    filter: alpha(opacity=0);
    hasLayout: true;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
}

Что это делает во всех браузерахкроме IE6 сделать ссылку действовать как слой, способный щелкать по DIV.К ссылке также добавлен класс .ir, чтобы скрыть текст внутри ссылки за пределами экрана:

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

Кто-нибудь получил решение, чтобы заставить его работать в IE6.И, пожалуйста, не читайте мне лекцию о поддержке IE6.Я прямо там с вами.

Вот HTML-код, который использует этот метод:

    <div class="alpha omega grid_4 f170region white" id="home_bg_youthzone">
        <h2 class="hidden">Youth Zone</h2>
        <div class="copy">There are many ways for younge residents to get help and support. Find out more...</div>
        <div class="getin">
            <p><span class="pink">Get</span><br />involved</p>
            <p><span class="pink">Get</span><br />in the zone</p>
        </div>
        <a class="linkcover ir" href="<?php echo site_url("/youth-zone/"); ?>" title="Go to Youth Zone">Go to Youth Zone</a>
    </div>

РЕДАКТИРОВАТЬ 2:

http://jsfiddle.net/9gSUd/

Ответы [ 2 ]

0 голосов
/ 22 июля 2011

Я нашел решение, используя файл spacer.gif в качестве BG.Я использовал это исправление, чтобы заставить наложение работать должным образом в IE http://kevindees.cc/2011/01/ie-adjacent-positioning-image-and-link-overlap-css-fix/

. Это позволило бы установить BG на белый, но установить непрозрачность на 0. Это работало во всех версиях IE, кроме IE6.Установив фон вместо spacer.gif вместо белого и установив ширину / высоту ссылки на 100%, я получил рабочее решение в IE6 и во всех браузерах.Вот мой окончательный CSS для ссылки:

.f170region .linkcover {
    background: url(../images/spacer.gif) no-repeat 0 0;
    bottom: 0;
    display: block;
    filter: alpha(opacity=0);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;
}
0 голосов
/ 22 июля 2011

Настройка привязки для отображения block, а width и height из 100% должны работать даже в IE6.

div{
    width:100px;
    height:100px;
    border:1px solid green;
}

a{
    display:block;
    width:100%;
    height:100%;
}

Пример: http://jsfiddle.net/Kkjdw/

ОБНОВЛЕНИЕ

Учитывая требование, чтобы якорь покрывал все содержимое, находящееся в данный момент в div, вот обновленный пример:

http://jsfiddle.net/Kkjdw/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...