web-dev-qa-db-fra.com

Image et texte à l'intérieur de la balise <a>

Ceci est le asp.net html généré (avec quelques détails d'identification du client supprimés)

Sous Windows XP/IE 7 cliquer sur l'image ne fait rien. Cliquer sur le texte exécute l'hyperlien. Cliquer avec le bouton droit n'importe où puis sélectionner open in new window ou open fonctionne également.

Dans d'autres navigateurs, tout fonctionne comme prévu.

Existe-t-il quelque chose de simple que tout le monde puisse voir que je pourrais faire pour que cela fonctionne correctement dans IE7?

<div id="hdrXXX">                      
            <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
                 <div style="float:left;display: block;"> 
                    <img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
                </div>
                <div style="float:left; display: block; padding:15px 0 0 0;"> 
                    <span id="XXX">Some text right here</span>

                </div>
            </a>  
       </div>
htmlcssinternet-explorerinternet-explorer-7
16
Adam Rackis

Vous ne pouvez placer des éléments au niveau du bloc dans des éléments d'ancrage qu'avec HTML5 et la prise en charge du navigateur est encore un peu incertaine. IE7 ne le supporte évidemment pas.

Vous n'avez pas besoin d'utiliser la division pour ce faire:

<div id="hdrXXX">                      
    <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
        <img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" /> 
        <span id="XXX">Some text right here</span>
    </a>  
</div>

Cela devrait fonctionner dans le même sens ...

26
animuson

À cause de vos flotteurs, l'ancre s'effondre. De plus, vous ne pouvez pas mettre d'éléments de niveau bloc <div/> à l'intérieur des éléments en ligne <a/>.

En gardant le code non W3C que vous avez là, vous devez effacer vos flotteurs avec ce code juste avant la fermeture </a>

<div style="clear: both"></div>

Vous voudrez probablement créer une classe appelée .clear et déplacez les styles vers cela. Voici un exemple de mon site:

.clear-fix {
clear: both !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}

Une meilleure façon de faire votre code qui est conforme au W3C est la suivante:

<div id="hdrXXX">                      
    <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
        <span style="float:left;display: block;"> 
            <img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
        </span>
        <span style="float:left; display: block; padding:15px 0 0 0;"> 
            <span id="XXX">Some text right here</span>
        </span>
        <span class="clear-fix"></span>
    </a>  
</div>
2
user888750

Essayez de supprimer les divs, car la balise img et la plage sont naturellement affichées en ligne. Ajouter un bloc d'affichage, flotter à gauche si vous avez besoin de marges à droite des balises elles-mêmes comme supposées ajouter des divs. De plus, à la balise d'ancrage, ajoutez overflow: hidden (si vous utilisez des flottants), de sorte qu'il occupe l'espace total des deux éléments enfants.

1
agmcleod