Link-Problem auf IE6 und IE7

Ich habe eine harte Zeit mit IE6 mit in letzter Zeit auf einem bestimmten Problem, hier ist das Bit von HTML Ich bin auf:Link-Problem auf IE6 und IE7

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
    <span style="display:block;width:100px;height:100px;"> 
     <img src="img.jpg" alt="My image" /> 
    </span> 
</a>

Alles ist in Ordnung mit Firefox etc, aber die Link wird nicht funktionieren, indem Sie direkt auf das Bild auf IE6 klicken (aber funktioniert irgendwo anders auf der Verbindung). Hier

ist ein Link: http://www.daniel-rico.com/demos/ie/

Hat jemand eine Idee?

Danke!

edit: Das funktioniert nicht auf IE7 entweder:/

Vielen Dank für Ihre Antworten!
Ich brauche das Span-Tag. Ich hätte etwas mehr erklären sollen, was ich zu tun versuchte; hier ist es:
Ich brauche eine Box anklickbar. Innerhalb von es ich brauche:

ein anderes Feld mit einer festen Größe, die ein dynamisches Bild (random-Verhältnis)
some text

Quelle

2009-04-30 Daniel

Können Sie erklären, was die gewünschte optische Wirkung ist, so kann ich die Notwendigkeit für die span-Tag verstehen –

Was ist, wenn Sie das Set passiert, Anzeige des img zum blockieren? – meandmycode

Noch funktioniert es in IE8. –

Entfernen Sie den Span-Tag enthalten wird, glaube ich nicht, dass Sie brauchen sie

<div style="width: 200px; height: 200px;"> 
    <a href="http://www.mylink.com" style="display: block; width: 100px; height: 100px;"> 
     <img src="img.jpg" alt="My image"/> 
    </a> 
</div>

Wenn Sie dann die Inline-Styles und verwenden extrahieren Kontrolle über das Markup haben

<div id="link"> 
    <a href="http://www.mylink.com"> 
     <img src="img.jpg" alt="My image"/> 
    </a> 
</div>

Im Kopf des Dokuments einen Verweis auf ein externes Stylesheet

<head> 
    <link rel="stylesheet" type"text/css" href="/Css/Style.css"/> 
</head>

erstellen style.css hinzufügen und

div#link 
{ 
    width: 200px; 
    height: 200px; 
} 

div#link a 
{ 
    display: block; 
    width: 100px; 
    height: 100px; 
}

hinzufügen Wenn Sie diese Art der Verbindung an mehreren Stellen verwenden entfernen Sie die ID auf der div und ersetzen mit

<div class="link"> 
    ... 
</div>

Und ändern Sie den Selektor in der CSS von # zu.

div.link 
...

Wenn Sie Probleme nur in IE6 aufweisen, können Sie auch bedingte Kommentare verwenden, um ein Stylesheet enthalten, die IE6 spezifische Probleme

<head> 
<!--[if IE 6]> 
    <link rel="stylesheet" type="text/css" href="/Css/IE6.css"/> 
<![endif]--> 
</head>

Quelle

2009-04-30 08:14:32

Der einfachste Weg, diese Fläche anklickbar zu machen fixiert ist Position hinzufügen : relativ zu Ihrem Link-Stil; Um den Cursorstil unter IE6 beizubehalten, können Sie cursor: hand zu Ihrem span-Element hinzufügen.

a{ position: relative; display: block; width: 200px; height: 200px; } 
span{ display: block; width: 100px; height: 100px; cursor: hand }

Wie andere vorgeschlagen, ist es besser, das IE6-spezifische Styling mit einem bedingten Kommentarblock zu trennen.

Hoffe, es hilft und viel Glück;)

Quelle

2009-04-30 08:55:54 yaanno

danke für deine antwort, ich habe schon die position relativ auf den link und auf allen elementen ausprobiert, ich habe auch versucht mit z-index zu spielen aber nichts scheint zu funktionieren:/ Hier ist ein live link wo du das checken kannst problem: http://www.daniel-rico.com/demos/ie Thx jeder! – Daniel

Seltsamer, die Breite und Höhe Eigenschaften Entfernung von der Spannweite Sie auf das Bild klicken, um ermöglicht.

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
    <span style="display:block;"> 
     <img src="img.jpg" alt="My image" /> 
    </span> 
</a>

Natürlich ändert dies vollständig das Layout, aber es könnte helfen, den IE-Fehler zu lösen.

Ein alternatives Verfahren zur Herstellung eines div mit einem Hintergrund-Bild anstelle eines img-Element zu verwenden wäre:

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
    <span style="display:block;width:100px;height:100px;"> 
     <div style="background-image:url(img.jpg);width:100px;height:100px;" title="My Image"><div> 
    </span> 
</a>

Edit:

Die Lösung Hintergrund-Bild funktioniert nicht für zufällige Verhältnisbild, das Sie in Ihrem Kommentar erwähnt haben. Wenn Sie nur das Layout im Mockup erreichen wollen:

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;padding-left:10px;"> 
     <img src="img.jpg" alt="My image" /> 
     <span style="padding-left:10px;">some text</span> 
</a>

Quelle

2009-04-30 09:53:34 brianpeiris

ich dies nicht in der Lage war, nur mit CSS zu lösen, habe ich Javascript um den Bereich zu zwingen anklickbar zu sein. Enttäuschend, aber gut, es funktioniert ...

Vielen Dank für Ihre Hilfe! Ich schätze es :)

Quelle

2009-04-30 11:13:15 Daniel

Können Sie Ihre endgültige Lösung veröffentlichen, wenn Sie sie noch haben? –

Ich habe versucht, es einfach auf:

<span style="display:block;width:100px;height:100px;"> 
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
     <img src="img.jpg" alt="Click your image now" /> 
</a> 
</span>

Quelle

2009-04-30 17:18:01 DaDa

Versuchen anwenden CSS-Eigenschaft zu überbrücken "zoom: 0;". Es funktioniert in meinem Fall.

Quelle

2009-11-09 15:37:15

Ich hatte fast ein identisches Problem beim Erstellen eines Nav in einer inhaltsverwalteten Website, aber durch die Tatsache, dass einige der Nav-Elemente in neuen Fenstern geöffnet werden mussten - was bedeutet, dass die Lösung, JavaScript zu verwenden, problematisch wurde.

Schließlich landete ich zu verlieren, um den < img .../> Tag und ersetzt mit einer < Spanne .../> und Einstellung des Hintergrundbild innerhalb der Spanne (I divs verwendet haben könnte, aber das ist schlechte Form nach das W3C).

So zurück zu Ihrem ursprünglichen Beispiel bezieht, würde ich gehen mit:

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
    <span style="display:block;width:100px;height:100px;"> 
    <span style="background-image=url(/img.jpg); width: 50px; height: 50px; display: block;"> 
     <span class="Hidden">My image</span> 
    </span> 
    </span> 
</a>

Quelle

2010-10-11 04:45:58

Antwort

Verwandte Themen