Image is not clickable inside anchor only in IE7

Question

Html Structure

<a>
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>

Anchor is not clickable only in IE7, I know the issue happens because of hasLayout, if we remove height & width of the span, it will work fine.

But I need to make it work with out removing height & width.

EDIT: You can fiddle with an example here: http://jsfiddle.net/rxcAb

Answer 1

CSS Only Solution

Tomas-I modified your fiddle into a working example. I changed your code to use a span inside the a tag because it is invalid to have a standard block level element (a div) in an inline element (an a tag). Giving the a tag layout (I used inline-block) and then setting a position:relative on that span with a z-index: -1 pushes the span "below" the a tag and makes IE7 recognize the a tag as active again. Below is the modified code used in my fiddle. You might want to set up a more generic class name than my ie7AFix (you probably will also want to just target IE7 for those CSS properties that are necessary for it only). I assume you are varying the width and height by images, and hence why you have those as inline styling.

HTML

<a href="http://www.google.com/" class="ie7AFix">
  <span style="width:222px; height: 150px;">
    <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
  </span>
</a>

CSS

a.ie7AFix {
    display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}

.ie7AFix span {
    border: solid #666 4px;
    display: block;
    position: relative;
    z-index: -1;
    line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}

.ie7AFix img { border: 1px solid red; }

Updated Fiddle with line-height added to make "cross browser" if one does not want to target IE7 only. I kept the width and height in the span html above, only because the original question (by both gviswanathan and Tomas) requested it. If you don't need to set the dimensions on the span for some reason, but are simply trying to do a double border on the image, then thirtydot's answer given in the comment's below is much simpler.

Answer 2

With jQuery, the following will force all links to work, and have the 'pointer' cursor:

$(document).ready(function () {

    $('a')
        .click(function () {        
            window.location = $(this).attr('href');
        })
        .hover(function () {
            $(this).css('cursor', 'pointer');
        });

});

I've tested this simulating IE7 with IE8 in compatibility view mode, but can't guarantee it will for IE7 on its own.

You may want to apply this more selectively -- I suspect that, as is, this might slow down older browser performance -- in which case apply a class (like <a href='myClass'>) to all links that are broken this way, and just change $('a') to $('.myClass')

Answer 3

Have you tried using the HTML5 shim? It helps a lot with issues that are caused by hasLayout.

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 4

Just take out the SPAN from the IMG. The IMG element can be styled with a class just like any other element, therefore you don't need a span around it.