CSS div覆盖在Internet Explorer中无法点击

Question

我一直在谷歌搜索和查询stackoverflow相当多但我没有发现这个确切的问题在其他任何地方重复.这可能是我忘记的傻事.

我正在做的事情:

通过使用两部分叠加按下图像的右侧或左侧来进行导航.代码就像我想在其他浏览器中一样工作,直到我在IE中尝试它才开心.

这是我现在被屠宰的代码.我删除了div的右侧等.这对我来说不适用于Internet Explorer 8(还没有尝试过IE 7/9),除非我要么:

• 将背景颜色设置为.navi_left
• 删除.top中的图像
• 如果我将内容放入.navi_left,则可以单击内容(例如文本),在其他浏览器中可以单击完整的div.

任何这些选项都可以使IE 8中的.navi_left可单击.

生成的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]-->