Image is not clickable inside anchor only in IE7

问题:

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

回答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.

回答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')

回答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]-->

回答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.

回答5:

give the following CSS rules to the a element:

{
    display:block;
    overflow:hidden;
}

回答6:

Ah another hasLayout quirk

it's not possible to achieve in IE7 and still retain the width of the span, if you could show what you're trying to achieve in a JS fiddle perhaps we could help, find a way around it e.g. and this is only a guess, putting the width on the anchor with some padding would help create a completely clickable area and still allow a "caption" span to be restrained if that's what you're after..

Example workaround not a fix

CSS:

a {
  display: inline-block;
  background: #ff0; 
  max-width: 50px; 
  padding: 10px; 
  text-align: center;
}

img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}

HTML:

<a href="#">
   <img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
   <span>Some text and even longer</span>
</a>

The above is only a thought, and if it's not what you're after, then please provide a sample jsfiddle.net

回答7:

May be it's a problem is that because you didn't define href="#" inside your <a> TAG So, put href="#" inside your <a> TAG. Write like this:

<a href="#">
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>

回答8:

Just wrap anchor tag inside Div or Span. Its working in IE7.

This way is wrong..?

回答9:

From your post I think u wanted a clickable image with span info text !! I hope this will help u ;)

http://jsfiddle.net/ajinkyax/v5KH5/3/

<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>

CSS:

.imgLink {display: block; width: 200px; text-align: center;}​

回答10:

See fiddle for code and demo

Fiddle: http://jsfiddle.net/rxcAb/29/

Demo: http://jsfiddle.net/rxcAb/29/embedded/result/

Perfectly working in IE7, IE8, FF, Chrome, Safari.

No changes in code: See below

<a href=http://www.google.com/>
<div class="gal_image" 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;">
</div>
</a>

回答11:

An easy way to do this is:

<p>
 <span><img></span>
 <span> Some text <span>
 <a></a>
<p>

p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`

回答12:

If you have something like:

<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>

Simply add a style property to the anchor like this:

<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">

This will make the div and everything inside of it clickable in IE7+ and firefox & chrome.