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

我一直在谷歌搜索和查询stackoverflow不少，但我还没有发现这个确切的问题在其他地方重复。这可能是我忘记的东西。CSS div覆盖在Internet Explorer中不可点击

我想要做的事：

通过按右或使用两部分覆盖左侧的图像制作导航。代码的工作方式与我在其他浏览器中所需的一样，我很高兴，直到我在IE中试用它。

这是我现在被屠杀的代码。我已经删除的DIV等右侧这不会对我在Internet Explorer 8中工作（没试过IE 7/9还），除非我要么：

设置背景色to .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);}

来源

2011-03-31 Mattis

您的PHP代码与浏览器的行为和此问题无关。请显示您的PHP生成的HTML和JavaScript - 浏览器看到的 - 而是。（理想情况下，在http：// jsfiddle上创建一个独立的，简化的，可重复的测试用例。净） – Phrogz 2011-03-31 20:54:33

使用生成的代码进行编辑。 – Mattis 2011-03-31 20:58:09

“我很高兴，直到我在IE中试用它” - 这应该被刻在史蒂夫鲍尔默的墓碑上。 – 2011-03-31 21:06:57

我有一个similar problem，最后使出的IE特定的样式，只是给了可点击区域的背景颜色和a：

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

来源

2011-03-31 21:16:34 jeroen

以防万一你想知道如何做到这一点，[如何创建一个IE浏览器样式表]（http://css-tricks.com/how-to-create-an-ie-only-stylesheet/）。 – 2011-03-31 21:19:39

@Jared Farrish谢谢您的补充，我应该提到这一点。 – jeroen 2011-03-31 21:21:34

这也被称为“[条件评论]（http://www.quirksmode.org/css/condcom.html）”。 – 2011-03-31 21:21:43

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

来源

2014-05-27 05:47:02 bbodenmiller

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

回答

相关问题