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

Это созданный 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="#" onclick="location.href='http://google.com'; return false;" 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>

Ответ 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>

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

Ответ 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>

Ответ 3

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