當我在<a>標籤中包裝內容時，該鏈接在IE中不起作用，有幫助嗎？

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 & 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或有它禁用用戶的支持。

Answer 5

嘗試設置鏈接的風格是這樣的：

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