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

Answer 2

如果您已经在使用filter / -ms-filter，之前设置背景颜色然后将其不透明度设置为0的解决方案将无效。相反，您可以将background-image设置为2x2透明png并继续使用现有的filter / -ms-filter，而不会产生任何负面影响。

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

2 个答案: