L'Image n'est pas cliquable à l'intérieur d'ancrage que dans IE7

CSS Seule Solution

Tomas-J'ai modifié votre violon dans un exemple de travail. J'ai changé votre code pour utiliser un span à l'intérieur de la a balise parce qu'il est inadmissible d'avoir un standard de niveau bloc (un div) dans un élément inline (un a tag). Donner la a balise de mise en page (j'ai utilisé inline-block) et de définir ensuite un position:relative sur que span avec un z-index: -1 pousse le span "en dessous" du a tag et fait IE7 reconnaître la a tag de nouveau actif. Ci-dessous est le code modifié utilisé dans mon violon. Vous pouvez définir une classe générique nom de mon ie7AFix (vous n'aurez probablement aussi veux juste la cible IE7 pour ceux propriétés CSS qui sont nécessaires pour lui seul). Je suppose que vous êtes en variant le width et height par des images, et c'est pourquoi vous avez ces inline style.

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

Mis À Jour Le Violon avec line-height ajouté pour faire de la "croix-navigateur" si on ne veut pas la cible IE7 seulement. J'ai gardé le width et height dans le span html ci-dessus, que parce que la question d'origine (par les deux gviswanathan et Tomas) l'a demandé. Si vous n'avez pas besoin de définir les dimensions sur le span pour une raison quelconque, mais sont tout simplement essayer de faire une double bordure sur l'image, puis thirtydot la réponse donnée dans le commentaire ci-dessous est beaucoup plus simple.

Avez-vous essayé d'utiliser le HTML5 cale? Il aide beaucoup avec les problèmes qui sont causés par hasLayout.

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

donner le code CSS suivant les règles de l'élément:

{
    display:block;
    overflow:hidden;
}

Il est peut-être un problème, c'est que parce que vous n'avez pas de définir href="#" à l'intérieur de votre <a> TAG Alors, mettez href="#" à l'intérieur de votre <a> TAG. Écrire comme ceci:

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

À partir de votre post, je pense que u voulais une image cliquable avec span texte d'info !! J'espère que cela aidera 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;}​

Un moyen facile de le faire est:

<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)"; }`