Html <a> 标签内的图片和文字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7260490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image and text inside of <a> tag
提问by Adam Rackis
This is the html asp.net generated (with some client-identifying details removed)
这是生成的 html asp.net（删除了一些客户端识别细节）
In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes the hyperlink. Right-clicking anywhere and then selecting open in new windowor openalso works.
在 Windows XP / IE 7 中，单击图像没有任何作用。单击文本执行超链接。右键单击任意位置，然后选择open in new window或open也可以使用。
In other browsers, it all works as expected.
在其他浏览器中，一切都按预期工作。
Is there anything simple anyone can see that I could do to this to get it to work correctly in IE7?
有没有什么简单的人可以看到我可以这样做以使其在 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>
回答by animuson
You can only put block-level elements inside anchor elements with HTML5 and browser support is still a bit iffy on it. IE7 obviously does not support this.
你只能将块级元素放在 HTML5 的锚元素中，浏览器支持仍然有点不确定。IE7 显然不支持这一点。
You don't need to use division to do this:
您不需要使用除法来执行此操作：
<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>
This should work to the same effect...
这应该可以达到相同的效果......
回答by agmcleod
Try removing the divs, as the img tag and span are naturally display-inline. Add display block, float left if you need margins right to the tags themselves as supposed to adding divs. Also, to the anchor tag, add overflow:hidden (if you use floats), so that it takes up the total space of the two child elements.
尝试删除 div，因为 img 标签和 span 自然是内联显示的。添加显示块，如果您需要标签本身的边距，则向左浮动，因为应该添加 div。另外，在锚标记中添加overflow:hidden（如果使用浮动），使其占据两个子元素的总空间。
回答by agmcleod
Because of your floats, the anchor collapses. Also, you can't put block level elements <div/>inside inline elements <a/>.
因为你的漂浮物，锚倒塌了。此外，您不能将块级元素<div/>放入内联元素中<a/>。
Keeping with the non-W3C code you've got there, you'd need to clear your floats with this code right before the closing </a>
保持你在那里的非 W3C 代码，你需要在关闭之前用这个代码清除你的浮点数 </a>
<div style="clear: both"></div>
You'll want to probably create a class called .clearand move the styles to that. Here's an example from my site:
您可能希望创建一个名为的类.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;
}
A better way to do your code which is W3C compliant is the following:
执行符合 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>
