CSS-оверлей можно отключить в Internet Explorer

Question

Я довольно долго гуглил и стековал стекоперенос, но нигде не нашел, чтобы эта проблема дублировалась.Возможно, это что-то глупое, что я забыл.

Что я пытаюсь сделать:

Создание навигации, нажимая правую или левую сторону изображения с помощью двухчастичное наложение.Код работал так, как я хотел в других браузерах, и я был счастлив, пока не попробовал его в IE.

Вот мой теперь забитый код.Я удалил правую часть div и т. Д. Это не работает для меня в Internet Explorer 8 (еще не пробовал IE 7/9) , если я не :

• Установите цвет фона на .navi_left
• Удалите изображение в .top
• Если я помещаю контент в .navi_left, контент (например, текст) можно нажимать в других браузерах.полный div доступен для клика.

Любой из этих параметров сделает .navi_left интерактивным в IE 8.

Сгенерированный html:

<div class="image_div_big" style="width:600px;">
<div class="top">
   <img src="../img/20110331-200524-1.jpg" class="image_big" width="600" height="450">
   <div class="navi_left" id="172" style="width:312px;height:474px;"><!--placeholder--></div>
</div>
</div>

CSS:

.image_div_big {float:left;}
.top {position:relative;width:100%;height:100%;}
.navi_left {cursor:pointer;cursor:hand;position:absolute;top:0px;left:0px;z-index:5;border:1px solid black;}

JavaScript:

    $('.navi_left').click(function(){
        var id = $(this).attr('id');
        if (id != '') {
            window.location = '/index_temp.php?i='+id;
        }
    });

МОЕ РЕШЕНИЕ:

Я наконец согласился, что мне нужно сделать, как предложено ниже.Однако я отказался от IE-специфичной таблицы стилей, поэтому я просто сделал это так:

.navi_left {position:absolute;top:0px;z-index:5;background-color:#fff;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);}
.navi_right {position:absolute;top:0px;z-index:5;background-color:#fff;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);}

Answer 1

У меня была похожая проблема , и в конце концов я прибегнул к специфической для IE таблице стилей и просто присвоил активируемой области цвет фона и:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

Не самое красивое решение, но оно работает.

Поместить комментарий @Jared Farrish в сам ответ; Я добавил следующий код в head моего html, чтобы адресовать только IE, используя условные комментарии :

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen"  href="/styles/ie.css" />
<![endif]-->

Answer 2

Если вы уже используете filter / -ms-filter, предыдущее решение установки цвета фона и затем установки его непрозрачности на 0 не будет работать для вас.Вместо этого вы можете установить background-image в прозрачный png 2x2 и продолжать использовать существующие filter / -ms-filter без каких-либо негативных эффектов.