jquery - CSS div 覆盖在 Internet Explorer 中不可点击

Question

我一直在谷歌搜索和查询 stackoverflow，但我没有发现这个确切的问题在其他任何地方重复。这可能是我忘记的愚蠢的事情。

我正在尝试做的事情:

通过使用两部分叠加层按图像的右侧或左侧进行导航。该代码在其他浏览器中的工作方式与我希望的一样，直到我在 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

我有一个 similar problem最后求助于 IE 特定样式表，并为可点击区域提供背景颜色和:

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

这不是最漂亮的解决方案，但它确实有效。

将@Jared Farrish 的评论放在答案本身中；我将以下代码添加到我的 html 的 head 以使用 conditional comments 仅解决 IE :

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