Image et texte à l'intérieur de & lt; a & gt; marque

C'est le html asp.net généré (avec quelque client que les données d'identification supprimé)

Dans Windows XP /IE 7 en cliquant sur l'image ne fait rien. Cliquez sur le texte exécute le lien hypertexte. Un clic droit puis en sélectionnant open in new window ou open fonctionne également.

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

Est-il rien de simple tout le monde peut voir que je pouvais faire pour l'obtenir pour fonctionner 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>

source d'informationauteur Adam Rackis | 2011-08-31

  1. 23

    Vous ne pouvez mettre les éléments de niveau bloc à l'intérieur d'ancrage des éléments de HTML5 et de la prise en charge du navigateur est toujours un peu douteux. IE7 n'est évidemment pas en charge cette.

    Vous n'avez pas besoin d'utiliser de 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 pour le même effet...

  2. 2

    En raison de votre flotte, l'ancre s'effondre. Aussi, vous ne pouvez pas mettre des éléments de niveau bloc <div/> à l'intérieur des éléments inline <a/>.

    Accord avec la non-W3C le code que vous avez là, vous auriez besoin de vider votre flotte avec ce code juste avant la fermeture </a>

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

    Vous souhaiterez probablement créer une classe appelée .clear et déplacer les styles. Voici un exemple de partir 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 de votre code qui est conforme aux normes 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>
  3. 1

    Essayez de supprimer les divs, comme la balise img et span sont naturellement display-inline. Ajouter l'affichage du bloc, le flotteur gauche si vous avez besoin de marges de droit pour les balises elles-mêmes, comme on le suppose à l'ajout de divs. Aussi, pour la balise d'ancrage, ajouter overflow:hidden (si vous utilisez des flotteurs), de sorte qu'elle occupe l'espace total de plus de deux éléments d'enfant.