Изображение и текст внутри тега <a>

Question

Это сгенерированный html asp.net (с удалением некоторых деталей, идентифицирующих клиента)

В Windows XP / IE 7 нажатие на изображение ничего не делает.Клик по тексту выполняет гиперссылку.Щелчок правой кнопкой мыши в любом месте и выбор open in new window или open также работает.

В других браузерах все работает как положено.

Есть ли что-нибудь простое, что кто-нибудь может увидеть, что я мог бы сделать, чтобы заставить его работать правильно в 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>  

Answer 1

Вы можете размещать элементы уровня блока только внутри элементов привязки с HTML5, и поддержка браузера все еще немного сомнительна. IE7, очевидно, не поддерживает это.

Вам не нужно использовать деление, чтобы сделать это:

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

Это должно работать с тем же эффектом ...

Answer 2

Из-за ваших поплавков якорь разрушается.Кроме того, вы не можете помещать элементы блочного уровня <div/> внутри встроенных элементов <a/>.

Для того чтобы использовать код, отличный от W3C, вы должны очистить свои плавающие с этим кодомпрямо перед закрытием </a>

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

Возможно, вы захотите создать класс с именем .clear и переместить стили к нему.Вот пример с моего сайта:

.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;
}

Лучший способ сделать ваш код, совместимый с W3C, следующий:

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

Answer 3

Попробуйте удалить div, так как тег img и span естественным образом отображаются на экране. Добавьте блок отображения, плавайте влево, если вам нужны поля справа от самих тегов, как предполагается для добавления div. Кроме того, к тегу привязки добавьте overflow: hidden (если вы используете float), чтобы он занимал общее пространство двух дочерних элементов.