Поведение img и a при абсолютном позиционировании в IE

keltanas · October 6, 2012

В итоге некоторых мучений создал тестовый код, который в IE и в браузерах ведет себя по разному. Вот ссылка img-click-test

Тут слой с картинкой (z-index:10) размещен под слоем со ссылками (z-index:1000). При чем одна ссылка залита фоном, другая - нет. Собственно, там, где слои пересекаются, не залитая ссылка перестает кликаться. Это проявляется во всех версиях IE включая 9.

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

Может кто знает, как можно решить это более элегантным способом без лишней графики?


<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
    #img {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 300px;
        height: 300px;
        z-index: 10;
        overflow: hidden;
    }
        #img img {
            width: 100%;
            height: 100%;
        }
    #panel {
        position: absolute;
        top: 200px;
        left: 100px;
        width: 300px;
        height: 300px;
        z-index: 1000;
    }
        #panel a {
            position: absolute;
            bottom: 0;
            width: 50%;
            height: 100%;
        }
        #panel a.left {
            left: 0;
            background: red;
        }
        #panel a.right {
            right: 0;
            border: 1px red solid;
        }
    </style>
</head>
<body>

<div id="img">
    <img src="http://www.html5-css3.fr/wp-content/uploads/2011/01/logo-html5-officiel-w3c.png" alt="">
</div>
<div id="panel">
    <a href="#" class="left"></a>
    <a href="#" class="right"></a>
</div>
</body>
</html>

Yazon_Nile · October 9, 2012

А никак. "Обманывать" ие все-равно придется. Будет это прозрачная картинка или прозрачный бордер - не суть важно..

SelenIT · October 9, 2012

Для IE9 помогает background:rgba(0,0,0,0). Для всех, кажется, помогает background:url(about:blank). В общем, лишь бы background не был дефолтным transparent none (хотя формально по стандарту, вроде бы, transparent и rgba(0,0,0,0) должны быть одним и тем же... но это всё-таки IE).

Sign In

Поведение img и a при абсолютном позиционировании в IE

Question

keltanas

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Yazon_Nile

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information