проблема z-index в IE с прозрачным div - PullRequest
Новая
       9

проблема z-index в IE с прозрачным div

20 голосов
/ 26 июня 2011

У меня есть прозрачный div-элемент с более высоким z-индексом, чем img-элемент на той же странице.Но Internet Explorer работает так, как будто img-элемент будет иметь более высокое значение z, когда дело доходит до событий щелчка. 

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
</head>
<body style="margin:0;padding:0;">
    <img src="7player.png" alt="7player" width="60" height="60" style="position:absolute; left: 100px; top: 100px; z-index:10" />
    <div style="width:100%;height:100%;position:absolute;z-index:900;" onclick="alert('hello');"></div>
</body>
</html>

При нажатии на изображение ничего не происходит, даже если событие щелчка элемента div являетсядолжен быть запущен (работает, например, в Chrome).

Есть ли какое-нибудь решение или исправить проблему?

Ответы [ 5 ]

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

На самом деле, ваш div "не имеет никакого фона",

Вам нужно придать ему цветной фон (например, белый) с непрозрачностью = 0,01.

Например: 

 background:white; filter:alpha(opacity=1);
4 голосов
/ 16 ноября 2012

Использование прозрачного изображения кажется разумным решением для IE. На этот вопрос уже ответили:

IE z-index проблема с элементом с прозрачным фоном

1 голос
/ 26 сентября 2016

Это все еще ошибка в IE11, но не Edge. Следующее решило мою проблему, создав фон, который «выглядит» прозрачным, но имеет цвет. 

background: rgba(255,255,255,0.0);

Немного лучше, чем вышеописанный фильтр, если вы хотите, чтобы прозрачным был только фон, а не содержимое объекта.

1 голос
/ 26 июня 2011

Я проверил предложение, данное Прели background:white;filter:alpha(opacity=1), и оно работает нормально.Смотрите демо в IE:

http://jsfiddle.net/VMrNF/11/

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

добавить слева: от 0 до div, доступно событие клика

проверено в ie9

...