StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1>Conclusion</h1> <p>Here's my conclusion after a lot more research.</p> <p>In <a href="http://nopeople.com/CSS%20tips/empty_anchor/index.html" rel="nofollow noreferrer">this page</a>, the author experienced the <strong>same behaviour in IE8</strong>.</p> <p>In this SO question (<a href="https://stackoverflow.com/questions/1663919/how-to-make-an-empty-anchor-tag-clickable-in-ie7">1663919</a>), the author experienced the <strong>same behaviour in IE7</strong>.</p> <p>In these SO questions (<a href="https://stackoverflow.com/questions/1075684/ie-only-part-of-an-anchor-is-clickable">1075684</a>, <a href="https://stackoverflow.com/questions/4639921/clicking-on-a-div-placed-over-an-image-in-ie">4639921</a>), the authors have the <strong>same problems in IE in</strong> slightly different but <strong>similar scenarios</strong>.</p> <p>It seems that <a href="http://www.w3.org/TR/html401/struct/links.html" rel="nofollow noreferrer">the spec</a> does not mention anything about that, but since it only happens in IE and it only happens when the anchor / button is put on top of an image (which isn't quite anyone would expect), I would say this is just a bug in IE.</p> <h1>Workarounds</h1> <p>Use <em>any one</em> below to workaround the problem:</p> <ol> <li><p>Do not put an anchor / button on an image. Instead, put it on a <code>div</code> with a CSS <code>background-image</code> (as stated in the Question).</p></li> <li><p>Set the following CSS property <strong>on the anchor / button</strong>, which makes it clickable again in IE (as stated <a href="https://stackoverflow.com/a/1664014/1402846">here</a>).</p> <pre><code>background-image:url(about:blank) </code></pre></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload