Bild ist nicht anklickbar inneren Anker nur im IE7

Html-Struktur

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

Anker ist nicht anklickbar, nur im IE7, ich weiß, das Problem geschieht, weil der hasLayout, wenn wir entfernen die Höhe & Breite der Spanne, wird es funktionieren.

Aber ich brauche, um es Arbeit mit, entfernen der Höhe & Breite.

EDIT:die Sie anpassen können, ein Beispiel hier: http://jsfiddle.net/rxcAb

InformationsquelleAutor der Frage gviswanathan | 2011-04-20

  1. 13

    Nur CSS Lösung

    Tomas-Ich veränderte Ihre Geige in ein funktionierendes Beispiel. Ich änderte Ihr code span innerhalb der a tag, weil es ungültig ist, um einen standard-block-level-element (ein div) in einem inline-element (ein a tag). Geben Sie die a tag-layout (ich habe inline-block) und dann die Einstellung ein position:relative auf, dass span mit einem z-index: -1 schiebt die span "unterhalb" der a tag und macht IE7 erkennen die a tag wieder aktiv. Unten ist der geänderte code in meinem Turnschuh. Möchten Sie vielleicht die Einrichtung einer allgemeineren Klasse name als meine ie7AFix (Sie werden wahrscheinlich auch wollen, nur Ziel IE7 für diese CSS-Eigenschaften, die notwendig sind, für die es nur). Ich nehme an, Sie sind die Variation der width und height von Bildern, und also, warum haben Sie diese als 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; }

    Aktualisiert Fiddle mit line-height Hinzugefügt, um "cross-browser", wenn man nicht will, um den Gegner IE7 nur. Ich hielt die width und height im span html oben, nur weil die ursprüngliche Frage (von beiden gviswanathan und Tomas) angefordert. Wenn Sie nicht benötigen, um die Maße auf der span aus irgendeinem Grund sind, sondern einfach versuchen zu tun, eine doppelte Grenze auf das Bild, dann thirtydot die Antwort in den Kommentar unten ist viel einfacher.

    InformationsquelleAutor der Antwort ScottS

  2. 5

    Mit jQuery, das folgende zu zwingen, alle links zu arbeiten, und haben den "Cursor" cursor:

    $(document).ready(function () {

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

});

    Ich habe getestet dieses simulieren IE7 mit dem IE8 im compatibility view-Modus, kann aber nicht garantieren, es wird für IE7 auf seine eigenen.

    Können Sie anwenden möchten dieses mehr selektiv-ich vermute, dass, wie es ist, dies könnte sich verlangsamen ältere browser-Leistung-in dem Fall gilt a-Klasse (wie <a href='myClass'>) für alle links, die defekt sind, und Sie ändern Sie einfach $('a') zu $('.myClass')

    InformationsquelleAutor der Antwort Faust

  3. 1

    Haben Sie versucht, mithilfe des HTML5-shim? Es hilft viel, sich mit Fragen, die durch hasLayout.

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

    InformationsquelleAutor der Antwort 472084

  4. 1

    Nehmen Sie nur die SPANNE von der IMG. Das IMG-element kann gestylt werden-mit einem Klasse-genau wie jedes andere element, daher brauchen Sie nicht eine Spannweite um.

    InformationsquelleAutor der Antwort MistaPrime

  5. 0

    geben Sie die folgenden CSS-Regeln auf ein element:

    {
    display:block;
    overflow:hidden;
}

    InformationsquelleAutor der Antwort Stephen

  6. 0

    Ah eine weitere Eigenart hasLayout

    es ist nicht möglich, Sie zu erreichen, im IE7 und behalten Sie noch die Breite der Spanne, wenn man zeigen könnte, was Sie zu erreichen versuchen, in ein JS-fiddle könnten wir vielleicht helfen, einen Weg finden, um es z.B. und das ist nur eine Vermutung, setzen Sie die Breite auf die anchor mit einigen Polsterung würde helfen, erstellen Sie eine völlig clickable area und immer noch erlauben, ein "caption" span zurückhaltend wenn es das ist, was Sie nach..

    Beispiel Abhilfe nicht eine 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>

    Das oben ist nur ein Gedanke, und wenn es ist nicht, was Sie nach, dann geben Sie bitte ein Beispiel jsfiddle.net

    InformationsquelleAutor der Antwort clairesuzy

  7. 0

    Kann sein das es ein problem ist, dass, weil Sie nicht definieren href="#" in Ihrem <a> TAG So legte href="#" in Ihrem <a> TAG. Schreiben wie dieses:

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

    InformationsquelleAutor der Antwort sandeep

  8. 0

    Nur wickeln Anker-tag in Div-oder Span. Seine arbeiten im IE7.

    Dieser Weg ist falsch..?

    InformationsquelleAutor der Antwort SR query

  9. 0

    Aus deinem post denke ich u wollte ein anklickbares Bild mit span-info-text !! Ich hoffe, dies hilft 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;}​

    InformationsquelleAutor der Antwort STEEL

  10. 0

    Sehen fiddle für code und demo

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

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

    Perfekt funktioniert im IE7, IE8, FF, Chrome, Safari.

    Keine änderungen im code: Siehe unten

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

    InformationsquelleAutor der Antwort w3uiguru

  11. 0

    Einen einfachen Weg, dies zu tun ist:

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

    InformationsquelleAutor der Antwort Pavol Hudran

  12. 0

    Wenn Sie so etwas wie:

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

    Fügen Sie einfach eine style-Eigenschaft, um den Anker wie diese:

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

    Dadurch wird das div-Element und alles, was darin anklickbar im IE7+ und firefox & Chrom.

    InformationsquelleAutor der Antwort Eagl3

Schreibe einen Kommentar