z-index + hover и змечательный IE8

[gekas]

Здравствуйте!  Есть блок, в котором находится фоновая картинка(фоновую картинку вставил с помощью img, так как надо, что бы высота блока регулировалась по её пропорциям, если можно это сделать через backgound  - буду ооочень благодарен, когда поделитесь методом, как это делается). Картинка спозиционирована relative и z-index: 1; Так же в блоке есть множество элементов с классом .m-pointer, которые принимают position:absolute, z-index:999. Проблема в работе псведокласса hover в ie8. Элементы .m-pointer  визуально находятся сверху над главной фоновой картинкой, НО hover в ie8 не работает. Подскажите, как решить эту проблему.. Бьюсь уже несколько часов.
 

.............. <img src="img/house.jpg" class="main-img" alt="main">           <span class="m-pointer p1" id="p1"></span>           <div class="m-pointer p2" id="p2"></div>           <div class="m-pointer p3" id="p3"></div>           <div class="m-pointer p4" id="p4"></div>           <div class="m-pointer p5" id="p5"></div>           <div class="m-pointer p6" id="p6"></div>           <div class="m-pointer p7" id="p7"></div>           <div class="m-pointer p8" id="p8"></div>           <div class="m-pointer p9" id="p9"></div>......................

.main-img{    position: relative;    display: block;    width: 100%;z-index: 1;}.m-pointer{    position: absolute;    cursor: pointer;    width: 43px;    height: 53px;    z-index: 999;    outline: 2px solid red;}.m-pointer:hover{    outline: 5px solid grey;}

Сам пример: _http://gekas.e3w.ru/gidrosbor/

Edited August 27, 2014 by gekas

[zenw]

У меня в режиме эмуляции и на IE10 не работает(

Однако вот отсюда код помогает:

http://alex.leonard.ie/2013/01/27/ie-bug-text-ignores-z-index-of-higher-elements/

background: transparent url('http://alex.leonard.ie/misc-images/transparent.png') repeat 0 0;

Естессно, картинку заменить на свою, и все такое.

Edited August 27, 2014 by zenw

[SelenIT]

Если это та же проблема, что некликабельность прозрачных элементов без фона, то ее должна фиксить даже фейковая картинка. Раньше я юзал url(about:blank), чтобы не дергать зазря сервер. Но он, бяка, в Хроме гадит в консоль ошибками «не тот тип ресурса», так что пришлось перейти на пустой Data Uri вида url(data:image/png,) — с ним, вроде бы, нигде никаких ошибок, а IEшная магия срабатывает.

Чуть позже проверю, работает ли она и для этой проблемы (сейчас с планшета, там нечем.

Edited August 27, 2014 by SelenIT

[gekas]

Да, фейковая картинка сработала. Спасибо большое zenw, SelenIT