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中不可點擊

回答

相關問題