沒有妥善解決IE背景圖片的可點擊性問題

我已經盡全力做出了一個像樣的網頁，通過W3C驗證等驗證，並嘗試做出響應式設計，並盡我所能在現場和非現場加強SEO。但是，我所有的努力都在愚蠢的IE瀏覽器中流失！我現在正在使用IE 8。我如何希望互聯網禁止IE瀏覽器的各種流浪行爲！沒有妥善解決IE背景圖片的可點擊性問題

我的問題是我無法獲得點擊放置在div背景圖片上的元素的解決方案。我是否使用背景顏色。如果我使用帶有不透明度的-ms-filter，則div消失！

有人請給出一個合適的解決方案！我曾嘗試在另一個問題中發佈該問題。我剛剛收到一個不起作用的建議。因此我再次嘗試。

我的代碼

HTML

<div id="header"> 
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1> 

       <div id="smshare"> 
         <img src="share.png" width="20" height="20" alt="Share on Social Media"> 
          <div id="smp"></div> 
       </div> 
     <div style="clear:both"></div> 

      <div class="header-small-image"> 
       <img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br> 
       <div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div> 
       <div style="clear:both"></div> 
      </div> 


     <div class="opaq"> 

       <a href="blogs" title="Search Property On landshoppe">BLOGS</a> 
         <a href="homeloans" title="Search Property On landshoppe">LOANS</a> 
         <a href="search-properties" title="Search Property On landshoppe">SEARCH PROPERTY</a> 
         <a href="post-listing" title="Free listing on Landshoppe">FREE LISTING</a> 
       </div> 


         <?php include('searchbox.php');?> 

     <div style="clear:both"></div> 

</div>

CSS

#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms-  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;} 
#header h2{font-size:35px;color:white;text-align:center} 
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5} 
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px} 
#searchbox input[type=submit]{float:right; 
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat; 
width:55px; 
height:51px; 
border:none;border:1px solid whitesmoke; 
cursor:pointer; 
padding:0px; 
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;; 

}

我的網站是www.landshoppe.com

來源

2016-08-01 user3526204

你想要點擊疊加的背景圖片嗎？ css pointer-events：none;爲該div應該工作，如在這裏提到的：http://stackoverflow.com/questions/4822234/make-overlay-background-click-through-able –

@Aththi，我有一個div的背景圖像。然後，在div中我有可點擊的元素，這是不可點擊的。我用代碼更新了這個問題.. – user3526204

除非你的元素有一個z-index或一個疊加層來防止它們被點擊，否則我不會看到父容器背景如何影響子元素的可點擊性。雖然我不能確定你從代碼中提到的元素。 –

你的頭元件在CSS pointer-events: none;集。

#header { 
    ... 
    pointer-events: none; //remove this line 
}

Remove pointer-events：none;從標題然後單擊事件將在其中工作。

此外這個問題不是IE特定的。在Chrome中也不適合我。 pointer-event: none使該元素及其子元素不可點擊，並單擊以落入底層元素。

來源

2016-08-01 13:08:58

指針事件被放在那裏作爲一個實驗becoz有人建議作爲一種補救措施....我已經刪除它。但還是不行！ IE拒絕放棄！ – user3526204

它在ie11中適用於我，以及在ie11中模擬ie8時。嘗試在IE中清除緩存。 –

但是，當訪問這些頁面時有javascript錯誤。 –

@Arathi，我找到了一個解決方案，將div內的所有事件放到另一個div中，並使其位置：絕對。現在它工作了！雖然我在移動響應設計中遇到了一些問題。猜猜我會解決這個問題，作爲下一個級別:)

來源

2016-08-02 09:23:04 user3526204

沒有妥善解決IE背景圖片的可點擊性問題

回答

相關問題