img ligne avec <a> provoque problème étrange dans IE

Doctype:img ligne avec <a> provoque problème étrange dans IE

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

HTML:

<a href="http://www.somelink.com"> 
    <img src="images/someimage.jpg" alt="sometag" /> 
</a>

CSS:

div.something img { 
    display:   inline; 
    border:   none; 
}

Firefox leur montre bien, IE ajoute juste un peu case inline (probablement où le texte doit être?) avec une bordure pourpre que IE utilise pour les liens visités. Cela se produit dans toutes les versions (6, 7 et 8).

Source

2009-05-29 Anonymous

Voici ce que montre IE: http://i41.tinypic.com/9jf77p.jpg –

En utilisant le code HTML suivant, j'ai pu reproduire votre problème:

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css"> 
     div.something img 
     { 
      display: inline; 
      border: none; 
     } 
     div.something a 
     { 
      border: 0; 
     } 
    </style> 
</head> 
<body> 
    <div class="something"> 
     <a href="http://www.somelink.com"> 
      <img src="images/someimage.jpg" alt="sometag" /> 
     </a> 
     <a href="http://www.somelink.com"> 
      <img src="images/someimage.jpg" alt="sometag" /> 
     </a> 
     <a href="http://www.somelink.com"> 
      <img src="images/someimage.jpg" alt="sometag" /> 
     </a> 
    </div> 
</body> 
</html>

Le problème avec cette est que l'espace blanc entre la fin de l'ouverture "a" et le début de la balise "img" est considéré comme faisant partie du lien.

Remplacement aillant:

<a href="http://www.somelink.com"><img src="images/someimage.jpg" alt="sometag" /></a>

a résolu le problème dans IE8 pour moi.

EDIT: Suppression du CSS. Il s'est avéré ne pas être nécessaire.

Source

2009-05-29 14:29:11

@Chris: Haha. Vous me battez de 14 secondes (voir commentaires @Mitchel). Accepter cela quand même car c'est la bonne réponse :) –

En règle générale, ne pas tabuler les éléments en ligne, gardez-les sur la même ligne dans votre code pour éviter cela et d'autres problèmes de rendu. –

Vous devez définir border="0" sur votre balise d'image pour résoudre le problème. IE lorsqu'une image est à l'intérieur d'un lien, met automatiquement la bordure "lien" autour d'elle, pour montrer qu'il s'agit d'un lien.

Vous pourriez également être en mesure d'utiliser les CSS pour définir la frontière à 0 pour la balise img

Source

2009-05-29 14:14:37

Le réglage de la bordure = "0" ne le fixe pas. Je suis déjà en train de mettre la bordure à zéro dans CSS. Si vous voulez dire 0 ou 0px, les deux ne fonctionnent pas non plus. –

@Daniel - Pouvez-vous poster le full HTML alors? C'est ce qui est nécessaire, j'ai testé avec un échantillon rapide que j'ai créé et il n'y avait pas de problème. –

@Mitchel: Les nouvelles lignes/onglets qui composent mon indentation ont été vues comme du texte en clair par IE. Mettre l'img sur la même ligne que l'étiquette de lien a fixé le problème. –

img ligne avec <a> provoque problème étrange dans IE

Répondre

Questions connexes