当我在<a> tag, the link doesn&#39;t work in IE, help?</a>中包装内容时

Question

我知道这可能不赞成，但是客户希望将实时文本包装在一个标签中....

所以，这是我的困境：

我有一些像这样的代码：

<a href="google.com">
    <img src="img.jpg" style="float:left;">
    <div style="float:right;">
        <h3>Title</h3>
        <p>Description</p>
    </div>
    <div style="clear:both;"></div>
</a>

我称之为显示：阻止。

此方法在FF5中运行良好，IE =并非所有内容都可点击，在此示例中仅图像可单击。 Chrome =有效。 Safari =工作。

如果您有不同的方法，建议您提供。

提前致谢！

Answer 1

您可以尝试将<a>变为<div>并使用javascript＆amp; css让它看起来和像链接一样工作

<div onclick="document.location.href='http://www.google.com'" style="cursor:pointer">
    <img src="img.jpg" style="float:left;">
    <div style="float:right;">
        <h3>Title</h3>
        <p>Description</p>
   </div>
     <div style="clear:both;"></div>
</div>

Answer 2

在HTML 4中，<a>标签中不允许使用块级元素，因此我不希望它跨浏览器工作。

更好的解决方案可能是使用Javascript onclick事件将用户发送到预定目的地。

<div id="clickable_div" onclick="document.location.href='http://google.com'">
    <img src="img.jpg" style="float:left;">
    <div style="float:right;">
        <h3>Title</h3>
        <p>Description</p>
    </div>
    <div style="clear:both;"></div>
</div>

Answer 3

一个建议是不要在内联元素中使用块级元素。它不会总是正确呈现（超出语义不正确）。尝试移除浮动并使用跨度来设置您想要成为H3和p的部分的样式。

<a href="google.com">
    <img src="img.jpg" style="float:left;">
    <span class='title'>Title</span>
    <span class='desc'>Description</span>

</a>

Answer 4

这完全违反了html specification，因为<a>元素只能包含inline elements而<div>是block element。因此，它在Internet Explorer中不起作用也就不足为奇了。实际上，它可能在许多其他浏览器中都不起作用，即使在它确实有效的浏览器中，也无法保证它能继续工作。

我能想到的唯一解决方法是JavaScript，如下所示：

<div onClick="javascript:window.open('google.com')">
    <img src="img.jpg" style="float:left;">
    <div style="float:right;">
        <h3>Title</h3>
        <p>Description</p>
    </div>
    <div style="clear:both;"></div>
</div>

但是，这将破坏对没有JavaScript或禁用JavaScript的用户的支持。

Answer 5

尝试设置如下链接样式：

<a style="display: block; position: relative;" ><div/></a>