CSS div overlay unclickable in internet explorer
I've been googling and querying stackoverflow quite a bit but I haven't found this exact problem duplicated anywhere else. It's probably something silly I've forgotten.
What I'm trying to do:
Making a navigation by pressing the right or the left side of the image by using a two-part overlay. The code worked just as I wanted it in the other browsers and I was happy until I tried it in IE.
Here's my now slaughtered code. I've removed the right side of the div etc. This does not work for me in Internet Explorer 8 (haven't tried IE 7/9 yet) unless I either:
- Set a background-color to .navi_left
- Remove the image in .top
- If i put content into .navi_left the content (for example a text) is clickable, in the other browsers the full div is cl开发者_如何转开发ickable.
Any of those options will make the .navi_left clickable in IE 8.
The html generated:
<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>
The 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;}
The javascript:
$('.navi_left').click(function(){
var id = $(this).attr('id');
if (id != '') {
window.location = '/index_temp.php?i='+id;
}
});
MY SOLUTION:
I finally agreed that I needed to do as suggested below. However I refused to have an IE-specific stylesheet, so I just did it as this:
.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);}
I had a similar problem and in the end resorted to an IE specific stylesheet and just gave the clickable area a background colour and a:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
Not the prettiest solution, but it works.
To put @Jared Farrish's comment in the answer itself; I added the following code to the head
of my html to address only IE using conditional comments:
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="/styles/ie.css" />
<![endif]-->
If you are already using filter
/-ms-filter
the previous solution of setting a background color and then setting its opacity to 0 will not work for you. Instead you can set your background-image
to a 2x2 transparent png and continue using your existing filter
/-ms-filter
's with no negative effects.
精彩评论