hide <a>テキスト（css）

"HOME"のテキストを隠し、それをワードプレスメニューの画像に置きたい。私は今、次のCSSコードを使用しています：イメージ上記のコードではhide <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; 
}

が表示されますが、HOMEテキストがまだそこにあります。おかげ

出典

2011-06-24 jay

は、私はそれがなぜあなたはちょうどスケルトンか何かからそれを削除しないでください...良い方法であると同様にCSSでテキストを隠してないと思います？ – JCOC611

テキストを隠すよりも、テキストを削除する方が良いでしょうか？ 'text-indent'を使うことで、スクリーンリーダーを持っているユーザーは、どんなリンクについても理解できるようになります。 'title'属性と結びついて、リンクは完全に実行可能で*アクセス可能です – Ross

オーバーフローの必要はありません。それが出現しないので、テキスト装飾が必要です。 – gutierrezalex

text-ident: -9999px;

は、あなたがあなたのスタイルに

color: transparent;

を追加することができ

text-indent: -9999px;

出典

2011-06-24 22:34:43 amosrivera

余分な点がある場合は、-9999pxの代わりに-9999emを使用してください。テキストの大きさにかかわらず、インデントはテキストサイズとともに大きくなります。 – Beejamin

でなければなりません。テキストを非表示にします。

出典

2011-06-24 22:34:49 Ryan

text-indentであり、text-identではない。

そしてdisplay: block

出典

2011-06-24 22:38:59 gutierrezalex

display：インラインブロック;ほとんどの場合、フロートの煩わしさを避け、よりうまくいくでしょう。 – webLacky3rdClass

答えて

関連する問題