<a>标签内的图像和文本

Question

这是由asp.net生成的HTML代码（已删除一些客户端识别细节）。

在Windows XP / IE 7中，单击图片不起作用。 单击文本会执行超链接。 在任何地方右键单击，然后选择在新窗口中打开或打开也可以正常工作。

在其他浏览器中，一切都按预期工作。

有没有简单的方法可以使它在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>  

- Adam Rackis

---

在HTML5中，您只能在锚元素内放置块级元素，其浏览器支持仍然不是很稳定。显然，IE7不支持此功能。 - animuson

@animuson - 你能把那个加入回答中吗？ - Adam Rackis

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>

这应该能够产生相同的效果...

- animuson

---

只有在使用HTML5时，您才能将块级元素放在锚元素内。 - Alexander Taylor

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> 

- user888750

Answer 3

尝试删除div，因为img标签和span本身就是display-inline的。如果需要在标签本身右侧添加边距，请添加display block和float left。此外，对于锚点标签，如果使用floats，请添加overflow:hidden以使其占用两个子元素的总空间。

- agmcleod