1

text-indent: -9999px css-trick を置き換える方法を探していました。これは、リンク テキストを非表示にし、ホーム ロゴ ボタンなどのリンクとして画像を表示するために使用されます。機能しているように見える簡単な解決策を見つけましたが、誇大宣伝されていないように見えるので、見えない穴があるかどうか疑問に思っています. 以下は解決策です。class="homeButton" は CSS ロールオーバー イメージを適用し、class="hide" は明らかにリンク テキストを非表示にします。テキストベースのリンクが通常画面に表示されず、スクリーン リーダーや検索エンジンには表示されるという欠点があるかどうかを教えてください。いつもながらサンクス…

<a class="homeButton" href="index.html"><span class="hide">Home Button</span></a>
4

3 に答える 3

1

HTML コード

<h1><a class="homeButton" href="index.html">Home Button</a></h1>

CSS コード

h1 {
    display: block;
    width: 386px;
    height: 83px;
    margin: 11px 0 0 10px;
    text-align: left;
    overflow-x: hidden;
}

h1 a.homeButton {
    display: block;
    width: 386px;
    height: 83px;
    text-indent: -19999px;
    background-repeat: no-repeat;
    background-image: url("http://existstudio.pl/images//template/ex-ist/ex-ist-logotype.png");
}

デモ

http://jsfiddle.net/bartekbielawa/rmWhF/

説明

<h1>好きなものを変えることができます。<h1>SEOに良いので私は好む

于 2013-04-22T23:03:20.790 に答える
1

.hide のコンテンツをどのように使用したかは正確にはわかりませんが、display:none を使用することを考えている場合は、忘れてください。display-none を持つ要素は、スクリーン リーダーと検索スパイダーの両方で無視されます。これは、非表示のコンテンツは無関係であると見なされるためです (特に、ブラック ハット SEO 担当者は、非表示のテキストにキーワードを簡単に詰め込むことができるため)。

text-indent ソリューションの何が問題なのか、私にはよくわかりません。確かに、インデントの値を減らして、IE6 が巨大な未使用のキャンバスにメモリを予約するのを止めたいと思いますが、それでも、これらの取り組みには推奨される手法です。

于 2013-04-22T22:13:37.550 に答える