a: hover выше img не работает с блоком отображения в IE & Opera - PullRequest
Новая
       11

a: hover выше img не работает с блоком отображения в IE & Opera

4 голосов
/ 21 июля 2010

Если бы у кого-то была проблема с a: hover , который имеет позицию: абсолютную и выше image в IE & Opera

a: hover имеет фон, но <a> нет, оба имеют display: block.

Thank you in advance for your help

...

Чтобы увидеть проблему, пожалуйста, проверьте эту веб-страницу: http://bckp.eu/test.html

или

используйте этот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
div {
    border: 1px solid black;
    position: relative;
    height: 200px;
    width: 500px;
}
a.next {
    right: 0;
}
a.prev {
    left:0;
}
.withbackground {
    background: yellow;
}
.nobackground {
    background: transparent;
}
a.link {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border:0;
}
a.link:hover, a.link:focus {
    background: url(/img/comment.gif) repeat !important;
}
</style>
</head>
<body>
    <div id="t">
        <a class="link nobackground" href="#">&lt;a&gt; without background</a>
        <img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
    </div>
    <p>Doesnt work under IE? <a href="#false" onclick="return a();">Add background</a> | This is not <a href="#" onclick="quirks()">quirks mode</a> <a href="http://www.satzansatz.de/cssd/quirksmode.html">#</a></p>
    <hr />
    <div>
        <a class="link withbackground" href="#">&lt;a&gt; with background</a>
        <img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
    </div>
    <div> <a class="link nobackground" href="#">&lt;a&gt; without background, without img</a> </div>
    <script type="text/javascript">
        function a() {
            document.body.innerHTML+='<style>#t a {background: pink;}</style>';return false;
        }
        function quirks() {
            alert(document.compatMode); return false;
        }
    </script>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 21 июля 2010

Это один серьезно странный баг. Теперь, если вам действительно нужно организовать ваш html так, как вы это делаете, то IE должен иметь следующий размещенный внутри тег a, чтобы он мог зарегистрироваться на изображении. 

<div style="position: absolute; filter: alpha(opacity=0); background: red; top: 0px; left: 0px"></div>

Но это было бы лучше (не проверено полностью во всех браузерах). Организовать HTML как (нет необходимости в обертке div): 

<a><img /></a>

Убедитесь, что a не position: absolute (IE7 не работал с ним так), а затем установите изображение на: 

img {position: absolute; z-index: -1}

Надеюсь, они направят вас к решению вашей проблемы.

0 голосов
/ 21 июля 2010

Скотт, спасибо за ваш ответ.Это просто пример проблемы.

Конечно, мой реальный код больше, чем это: - 2 тега для навигации назад / вперед (поэтому я не могу поставить <a><img></a>) - оба имеют, но с отображением:нет (<a><span>prev</span></a>).дисплей: блок не помогает

z-index не помогает.position: absolute работает, когда <a> имеет фон.

У меня не может быть фильтра: alpha (opacity = 0) или opacity = 0, потому что не все браузеры поддерживают это.

Я нашел странное решениеэто решает проблему, но я не хочу ее использовать: a {background: url(filedoesnotexists);} или я могу использовать, например, прозрачный файл 1x1 gif, но я хотел бы найти причину моей проблемы.

Решение с img{position: absolute; z-index: -1;} div{position: relative;} a{position: static;} работает точно так же - нет парения без фона над img для ie & opera

Я также встретил еще одну странную вещь с этим в моем основном коде - попробую воспроизвести его,(РЕДАКТИРОВАТЬ ниже)

Это еще одна странная проблема - IE работает, но только тогда, когда у него есть другой "слой" и мышь находится над этим слоем.Opera отлично работает в любом случае:

http://bckp.eu/test2.html - нажмите Exif info и наведите курсор мыши на изображение / новый «слой»

...