如何使Chrome和IE正確顯示區塊超鏈接

我一直使用以下代碼來使< a>鏈接填充其容器的內容。 Chrome和IE現在均顯示< a>鏈接內容的大小。如何使Chrome和IE正確顯示區塊超鏈接

我已經嘗試過明確的像素高度和重要的標籤，但鉻仍然堅持使鏈接的大小的內容。該鏈接沒有內容，因此顯示爲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; 
}

來源

2013-03-18 Obsidian

這應該工作正常，雖然你有.div（類div）而不是div（元素div） – 2013-03-18 11:15:58

它看起來另一種風格是應用display：inline;到我的錨標記。 Firefox接受我的block chrome忽略了我的更改。 – Obsidian 2013-03-18 11:26:59

修復了抱歉的傢伙是一個緩存問題。 – Obsidian 2013-03-18 11:34:51

在這裏你去 - 在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/

來源

2013-03-18 11:30:55 Cynthia

您應該刪除從div的，.。爲類名選擇，你在這裏直接div

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

文風

DEMO

來源

2013-03-18 11:14:22 Sowmya

.div僅僅是一個例子，對象的類是不同的。 – Obsidian 2013-03-18 11:18:36

@DreamTeK它也應該在這種情況下工作。檢查這個http://jsfiddle.net/V6CPG/2/ – Sowmya 2013-03-18 11:19:48

您的意思是：this

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和鏈接定義一個類，並根據需要設置它的樣式。

來源

2013-03-18 11:21:23

我想你應該與Chrome和IE的版本，你也操作系統啓動，而這塊的你給的代碼，可以作爲一個魅力。

我知道，舊版本的IE瀏覽器在將錨點顯示爲塊時出現了一些問題，修復它的正確方法是設置假背景，如：background: url(/);，但我確信情況並非如此。

如果您有任何其他樣式表應用於您的頁面，也請提供信息。

來源

2013-03-18 11:38:57

如何使Chrome和IE正確顯示區塊超鏈接

回答

相關問題