All geek questions in one place

Cannot press / button before img in IE6 or IE9

Problem

I am writing a web page where a user can click on a part of an image to trigger a Javascript event . However, I found that if I put a fixed binding ( a ) / button ( input type=button ) on the image ( img ), the user cannot click on it in IE (only), even if it is on top of the image.

Demo

 <style type="text/css"> .MyDiv { position:relative; left:0px; top:0px; width:275px; height:95px; } .MyDiv .MyImageDiv { position:absolute; left:0px; top:0px; width:275px; height:95px; background-image:url('https://www.google.com/images/srpr/logo3w.png'); } .MyDiv .MyButton { position:absolute; left:162px; top:20px; width:53px; height:80px; display:inline-block; /* Added based on @Zeta comment */ background-color:transparent; /* background-color:black;opacity:0.5;*/ border:0px; cursor:pointer; } </style> <!-- Button on image: cannot click in IE. Why? --> <div class='MyDiv'> <img src='https://www.google.com/images/srpr/logo3w.png' /> <input type='button' class='MyButton' onClick="alert('You clicked g!');"/> </div> <!-- Anchor on image: cannot click in IE. Why? --> <div class='MyDiv'> <img src='https://www.google.com/images/srpr/logo3w.png' /> <a href='#' class='MyButton' onClick="alert('You clicked g!');"></a> </div> <hr/> <!-- Button on div with background-image: no problem --> <div class='MyDiv'> <div class='MyImageDiv'></div> <input type='button' class='MyButton' onClick="alert('You clicked g!');"/> </div> <!-- Anchor on div with background-image: no problem --> <div class='MyDiv'> <div class='MyImageDiv'></div> <a href='#' class='MyButton' onClick="alert('You clicked g!');"></a> </div>

Demo version

To check, press the small letter g in

  • Demo1 (original)
  • Demo2 (full, w3c checked)
  • Demo3 (full, w3c verified, with text-indent as suggested by @ Sparky672).

Strike> EDIT (2012-12-05): Migration demo to jsfiddle.

More details

I can click and run the two lower warnings in all browsers; however, the first two CANs DO NOT start in IE (see test results below). This is normal, because I can always remind myself not to write this way, but is there any reasonable explanation why this is happening?

PS I tried to use z-index on the anchor / button, but that didn't help.

EDIT (2012-06-01): Tried to use display:block / display:inline-block on the anchor / button (according to @Zeta's comment), but that didn't help.

I also tried using the IE9 development tools (F12) to try to debug the page. If I use the arrow tool (Ctrl + B) to select the anchor / button, it cannot be selected; but if I select the anchor / button element in HTML Developer Tools, it will correctly display the position and size of the anchor / button. Strange enough.

Test results

 +-------------------------------------------------------+---------------------------------------+ | | Can click on anchor / button on image | +-------------------------------------------------------+---------------------------------------+ | IE 6.0.2900.2180.xpsp_sp2_gdr.100216-1441, on Windows | **NO** | | IE 9.0.8112.16421, on Windows | **NO** | | Opera 11.64, on Windows | Yes | | Opera 12.00, on Windows | Yes | | Opera 12.02, on Windows | Yes | | Opera 12.11, on Windows | Yes | | Opera 11.64, on Mac | Yes | | Opera 12.00, on Mac | Yes | | Opera Mini 7.0.4, on iPhone | Yes | | Firefox 12.0, on Windows | Yes | | Firefox 14.0.1, on Windows | Yes | | Firefox 15.0.1, on Windows | Yes | | Firefox 13.0, on Mac | Yes | | Chrome 19.0.1084.52m, on Windows | Yes | | Chrome 22.0.1229.79 m, on Windows | Yes | | Chrome 23.0.1271.95 m, on Windows | Yes | | Chrome 19.0.1084.54, on Mac | Yes | | Chrome 21.0.1180.82, on iPhone | Yes | | Safari 5.1.5, on Windows | Yes | | Safari 5.1.7 (7534.57.2), on Windows | Yes | | Safari 5.1.7 (7534.57.2), on Mac | Yes | | Safari, on iOS 4.3.5 | Yes | | Browser, on Android 3.1 | Yes | +-------------------------------------------------------+---------------------------------------+
+4
source share
2 answers

Conclusion

Here is my conclusion after much more research.

In on this page, the author experienced the same behavior in IE8 .

In this SO question ( 1663919 ), the author experienced the same behavior in IE7 .

In these SO questions ( 1075684 , 4639921 ), the authors have the same “problems” in IE in slightly different but similar scenarios .

The spec doesn't seem to mention this, but since it only happens in IE, and it only happens when the anchor / button is placed on top of the image (which no one would expect), I would say that this is just an error in IE .

Bypass

Use one below to solve the problem:

  • Do not place the snap / button on the image. Instead, put it on a div using CSS background-image (as indicated in the Question).

  • Set the following CSS property on the anchor / button , which makes it interactive again in IE (as indicated here ).

     background-image:url(about:blank)
+8
source

Something is confused here.

In the first two divs, you use img before the input or tags

 <div class='MyDiv'> <img src='https://www.google.com/images/srpr/logo3w.png' /> <input type='button' class='MyButton' onClick="alert('You clicked g!');"/> </div> <div class='MyDiv'> <img src='https://www.google.com/images/srpr/logo3w.png' /> <a href='#' class='MyButton' onClick="alert('You clicked g!');"/></a> </div>

In other divs, it just shares before inputs. Any reason for this?

Try installing img inside the tag.

 <div class='MyDiv'> <a href='#' class='MyButton' onClick="alert('You clicked g!');"/><img src='https://www.google.com/images/srpr/logo3w.png' /></a> </div> <div class='MyDiv'> <a href='#' class='MyButton' onClick="alert('You clicked g!');"/><img src='https://www.google.com/images/srpr/logo3w.png' /></a> </div>
+1
source

Source: https://habr.com/ru/post/1415566/

More articles:


All Articles