Keine richtige Lösung für IE Klickbarkeit über Hintergrundbild

Ich habe alles getan, um eine anständige Web-Seite mit W3C Validator usw. zu validieren und versucht, ein responsives Design zu machen und tat alles, um SEO vor Ort und außerhalb der Website zu verbessern. Aber all meine Bemühungen gehen mit dummem IE den Bach runter! Ich benutze jetzt IE 8. Wie ich Internetverbot IE für seine verschiedenen Landstreichereien wünsche!Keine richtige Lösung für IE Klickbarkeit über Hintergrundbild

Mein Problem ist, ich bin nicht in der Lage, eine Lösung für das Klicken auf Elemente über ein div Hintergrundbild gelegt bekommen. Ob ich Hintergrundfarbe verwende oder nicht. Wenn ich -ms-filter mit Opazität verwende, verschwindet das div!

Jemand bitte geben Sie eine richtige Lösung! Ich habe versucht, das Problem in einer anderen Frage zu veröffentlichen. Ich habe nur einen Vorschlag, der nicht funktioniert hat. Daher versuche ich es erneut.

Mein Code

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

}

Meine Website ist www.landshoppe.com

Quelle

2016-08-01 user3526204

Willst du in der Lage sein, durch das überlagernde Hintergrundbild zu klicken? css Zeiger-Ereignisse: keine; denn das div sollte funktionieren, wie hier erwähnt: http://stackoverflow.com/questions/4822234/make-overlay-background-click-through-able –

@Arathi, ich habe ein background-image in einem div. Dann habe ich im div klickbare Elemente, die nicht anklickbar sind. Ich aktualisiere die Frage mit dem Code. – user3526204

Wenn Ihre Elemente nicht über einen Z-Index oder eine Überlagerung verfügen, die verhindert, dass sie angeklickt werden, sehe ich nicht, wie der Hintergrund eines übergeordneten Containers die Klickbarkeit eines untergeordneten Elements beeinflusst. Obwohl ich auch nicht erkennen kann, auf welche Elemente Sie sich aus Ihrem Code beziehen. –

Ihr Kopfelement pointer-events: none; Satz in der CSS.

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

Entfernen Zeiger-Ereignisse: keine; aus der Kopfzeile und dann klicken Sie auf Ereignisse werden darin arbeiten.

Auch dieses Problem ist nicht IE-spezifisch. Hat auch nicht für mich in Chrome funktioniert. pointer-event: none macht dieses Element und seine untergeordneten Elemente nicht anklickbar und klickt auf das zugrunde liegende Element.

Quelle

2016-08-01 13:08:58

Die Zeiger-Ereignisse wurden als ein Experiment dorthin gebracht, weil jemand vorgeschlagen hatte, es als Heilmittel zu benutzen ... Ich habe es entfernt. Aber immer noch nicht gehen! IE weigert sich nachzugeben! – user3526204

Es funktioniert für mich in ie11, und wenn ie8 auch in ie11 emuliert. Versuchen Sie, Ihren Cache im IE zu löschen. –

Es gibt jedoch Javascript-Fehler, wenn Sie auf diese Seiten gehen. –

@Arathi, ich fand eine Lösung, indem ich alle Ereignisse innerhalb des div in ein anderes innerhalb dieses div setzte und seine Position einnahm: absolut. Jetzt funktioniert es ! Obwohl ich ein Problem im mobilen Responsive Design habe. Schätze, ich werde das als nächste Stufe angehen :)

Quelle

2016-08-02 09:23:04 user3526204

Keine richtige Lösung für IE Klickbarkeit über Hintergrundbild

Antwort

Verwandte Themen