Проблема CSS - Ссылка (позиция: абсолютная) над боксом не работает в IE + Opera - PullRequest
Новая
       50

Проблема CSS - Ссылка (позиция: абсолютная) над боксом не работает в IE + Opera

9 голосов
/ 22 июня 2011

У меня есть ссылка внизу блока div, которая имеет позицию: absolute и должна перекрывать весь блок div.

вот так: http://jsfiddle.net/UpwvT/4/

В FF и Webkit он работает нормально, но в IE + Opera «некоторый текст» по-прежнему не является ссылкой и не активируется.

У кого-нибудь есть идея? :) спасибо

Ответы [ 6 ]

7 голосов
/ 22 июня 2011

Похоже, ошибка в Opera и IE.

Есть мой хак для Opera и IE9. Добавьте это для .link
background-color: rgba(204,204,204,0.01);

Это очень прозрачный фон.

http://jsfiddle.net/UpwvT/19/

Это не работает в IE8.

4 голосов
/ 10 декабря 2011

Проблема решена - просто добавьте прозрачный фон ссылки в CSS - для меня нормально работать с прозрачным GIF-файлом. 

.link_css{
background: url(path_to_your_file/trans.gif);
}
3 голосов
/ 05 декабря 2013

Я использовал то же решение, предложенное Павлиным, но с использованием прозрачного GIF-кода в формате 1x1px, URL-адрес, таким образом: 

.link_css{
  background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

Таким образом, вы избегаете дополнительного http-запроса к серверу с очень небольшим количеством байтов.увеличения в таблице стилей CSS. URL-адрес данных поддерживается в IE8 +.
http://caniuse.com/datauri

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

Все еще не понимаю, откуда эта ошибка ... Лично я просто положил туда полностью прозрачный bg 

background: rgba(0,0,0,0);
0 голосов
/ 22 июня 2011

Не нужно добавлять блок ссылок внутри поля следующим образом: 

<div class="box" onclick="location.href='http://google.com'">
    some text
</div>

И определять стили следующим образом: 

<style>
    .box {
        width:200px;
        height:200px;
        background:#ccc;
        position:relative;
        text-align:center;
        z-index:1;
        cursor: pointer;
        cursor: hand;
    }
</style>

Рабочая демонстрация: http://jsfiddle.net/rathoreahsan/cLmqe

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

как насчет размещения тега ссылки (a) вокруг div следующим образом: 

<a class="link" href="http://google.com">
    <div class="box">
        some text
        <div class="linkbox">
            &nbsp;
        </div>

    </div>
</a>

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

Слежение также должно быть возможным:

<div class="box">
    <a class="link" href="http://google.com">
        some text
        <div class="linkbox">
            &nbsp;
        </div>
    </a>
</div>

Я верю, что это нужно исправить.

...