CSS - 如何讓一個DIV中的一個連接工作與背景圖像

Question

tab-ver.tab {

background: url(../images/16by16.png) no-repeat center center; 
    text-indent: -10000em; 
    height: 16px; 
    width: 16px; 
    padding: 4px 1px; 
    margin-right: 1px; 
    margin-left: 50px; 
} 

<div id="tab-ver" class="tab"><a href="http://www.yahoo.com">English</a></div> 

以上腳本的問題是，一個鏈接不會在所有的工作。如果用戶點擊16by16.png圖片，用戶不會重定向到yahoo.com。

但是要解決這個問題？

謝謝

// update001// 
I have tried the following suggestion: 

#tab-ver.tab { 
    text-indent: -10000em; 
} 
#tab-ver.tab a{ 
    background: url(../images/16by16.png) no-repeat center center; 
    height: 16px; 
    width: 16px; 
    padding: 4px 1px; 
    margin-right: 1px; 
    margin-left: 50px; 
    display: block; 
} 

它爲我原來的問題。但是，顯示的圖像現在偏移到水平菜單的底部。這是由'display：block'造成的。但是，如果我刪除'display：block'，那麼圖像將不可見。

謝謝

// update 1 // 

Based on the suggestion, the following script works best for me 

#tab-en-ver.tab a { 
    background: url(../images//16by16.png) no-repeat center center; 
    height: 16px; 
    width: 16px; 
    padding: 4px 1px; 
    margin-right: 1px; 
    margin-left: 50px; 
    text-indent: -10000em; 
} 

然而，這個建議確實有一個問題。文字「英文」與圖像混合。我無法弄清楚如何從鏈接中刪除「英文」文本。

通過添加下面的額外規則將導致圖像消失。

#tab-ver.tab { 
text-indent: -10000em; 
} 

有什麼想法嗎？

Answer 1

如果你想要的文字（「英語」）被隱藏，比你必須使用<img/>標籤，與alt屬性，是這樣的：

<img src="english-flag.png" alt="English" /> 

您也可以使用一些CSS黑客，但：

1. 用於什麼？使用純HTML可以輕鬆實現！
2. 這些都是黑客行爲，所以他們可能工作或不在不同的瀏覽器。

一種這樣的黑客可以是一個背景設定爲<a/>元件，以抵消文本，到溢流設置爲隱藏，並設置固定寬度：

a{ 
    padding-left:16px; 
    overflow:hidden; 
    display:block; 
    width:16px; 
    height:16px; 
    url(../images/16by16.png) no-repeat left top;} 

<a href="...">English</a> 

Answer 2

改爲將該CSS改爲<a>。添加一個display: block，這樣它將顯示爲塊級元素，如<div>。 <div>將擴大到適合<a>。

編輯：嘗試inline-block而不是看看是否有幫助。

#tab-ver.tab a { 
    display: inline-block; 
    background: url(../images/16by16.png) no-repeat center center; 
    text-indent: -10000em; 
    height: 16px; 
    width: 16px; 
    padding: 4px 1px; 
    margin-right: 1px; 
    margin-left: 50px; 
} 

Answer 3

你可以有a標籤使用填補了DIV：

a { 
    display: block; 
    height: 16px; 
} 

然後，您可以也從div刪除height，因爲它會自動增長。