如何使Chrome和IE正確顯示阻止超鏈接

Question

我一直使用以下代碼使<a>鏈接填充其容器的內容。 chrome和IE現在都顯示<a>鏈接內容的大小。

我嘗試了顯式的像素高度和重要的標記，但Chrome仍然堅持使鏈接的大小與內容相同。 鏈接沒有內容，因此顯示為0px高度和寬度。

這是我如何制作塊超鏈接？

HTML

<div class="mydiv">
    <a href="#"></a>
</div>

CSS

.mydiv {
    height: 50px;
    width: 50px;
    display: block;
}
.mydiv a {
    height: 100%;
    width: 100%;
    display: block;
}

Answer 1

您的意思是：這個

HTML：

<div class="abc">
  <a href="#"></a>
</div>

CSS：

.abc {
height: 50px;
width: 50px;
display: block;
border-style:solid;
border-width:3px;
}
.div a {
height: 100%;
width: 100%;
display: block;
}

只需為div定義一個類，然后根據需要鏈接和設置其樣式即可。

Answer 2

在這里，您已經在Chrome和IE中進行了測試，並且可以同時在兩種環境中使用：

這是HTML：

<div class="abc">
    <a href="http://www.google.com"></a>
</div>

和CSS：

div.abc { display:block ;
    width:200px ;
    height:50px ;
    background:blue ;
}

.abc a { display:block ;
    width:100% ;
    height:100% ;
}

您可以在div.abc中編輯高度和寬度，超文本鏈接將相應調整。

此處的演示： http : //jsfiddle.net/PRZaX/

Answer 3

您應該刪除. 來自div， 是類名稱的選擇器，這里您正在編寫直接div樣式

div {
height: 50px;
width: 50px;
display: block; background:red
}
div a {
height: 100%;
width: 100%;
display: block;
}

Answer 4

我認為您應該從Chrome和IE的版本開始，並且您的操作系統也應如此，而您提供的代碼卻很有魅力。

我知道，較舊版本的IE在將錨點顯示為塊時存在一些問題，並且解決該問題的正確方法是設置假背景，例如： background: url(/); ，但我很確定情況並非如此。

另外，如果您將其他樣式表應用於頁面，也請提供信息。