<a> tag</a>内的图片和文字

时间:2011-08-31 16:46:25

标签: html css internet-explorer internet-explorer-7

这是生成的html asp.net(删除了一些客户识别细节)

在Windows XP / IE 7中,单击图像不会执行任何操作。单击文本执行超链接。右键单击任意位置,然后选择open in new windowopen也可以。

在其他浏览器中,它都按预期工作。

是否有任何简单的任何人可以看到我可以做到这一点,以使其在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>  

3 个答案:

答案 0 :(得分:26)

你只能使用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>

这应该起到同样的效果......

答案 1 :(得分: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> 

答案 2 :(得分:1)

尝试删除div,因为img标记和span是自然显示内联的。添加显示块,如果您需要将标签本身设置为添加div,则向左浮动。另外,对于锚标记,添加overflow:hidden(如果使用浮点数),这样就占用了两个子元素的总空间。