隱藏<a>帶CSS的文本

我想隱藏「HOME」文本並將其替換爲wordpress菜單上的圖像。我使用下面的CSS代碼現在：隱藏<a>帶CSS的文本

li#menu-item-63 a { 
background: url(/images/home.png) top center no-repeat; 
width: 24px; 
height:24px; 
float: left; 
text-ident: -9999px; 
overflow: hidden; 
text-decoration: none; 
}

隨着圖像上面的代碼出現，但我們的最新消息依然存在。由於

來源

2011-06-24 jay

我不認爲隱藏文本與CSS一樣，是一個很好的做法......你爲什麼不只是從骨架或東西刪除？ – JCOC611

如何刪除文本比隱藏它更好的做法？通過使用「文本縮進」，您可以讓屏幕閱讀器的用戶仍然瞭解鏈接的內容。結合'title'屬性，鏈接完全可行*和*可訪問 – Ross

無需溢出：隱藏;和文字修飾，因爲它不會出現。 – gutierrezalex

text-ident: -9999px;

應該

text-indent: -9999px;

來源

2011-06-24 22:34:43 amosrivera

對於額外的點，使用-9999em而不是-9999px - 這樣，縮進將隨着文本大小一起增長，確保它無論文本有多大都會被隱藏。 – Beejamin

您可以添加

color: transparent;

你的風格。將隱藏文字。

來源

2011-06-24 22:34:49 Ryan

text-indent而不是text-ident。

而且display: block

來源

2011-06-24 22:38:59 gutierrezalex

display：inline-block;大部分時間會更好，避免浮動麻煩。 – webLacky3rdClass

隱藏<a>帶CSS的文本

回答

相關問題