Z-index в IE с прозрачным div

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

<!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>

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

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

Ответы

Ответ 1

Фактически, ваш div "Не имеет фона",

Вам нужно указать цвет фона (например, белый) с opacity = 0.01.

Например:

 background:white; filter:alpha(opacity=1);

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

проверено в ie9