CSS テキスト インデント: -9999px;_html/css_WEB-ITnose

ウェブサイトを構築する過程で、友人はウェブサイト名を表すために H1 を使用することを好みますが、美的理由から、現時点では h1 の代わりにロゴ画像を使用する必要があります。非表示にする必要がありますが、検索エンジンで無視することはできません。そうしないと、h1 タグを定義する意味が失われます。

CSS で単語を絵に置き換えるにはどうすればよいですか? CSS でテキストを非表示にする方法を探しました。

1. display:none;

これは次のとおりです。理論的には、検索エンジンは隠しテキストをスパムとみなして無視し、隠しオブジェクト用の物理スペースを確保しない可能性があります。 GG は CSS ファイルも検索しますか?しかし、この方法を用いる場合、＜ｈ１＞をどう設計するかがまた難しい問題となる。

2. Visibility:hidden;

は、非表示のオブジェクト用に物理スペースを予約する display:none; に対応します。

3. overflow:hidden;

これはインターネット上で最も一般的に使用されている方法ですが、h1 タグの「サイト名」テキストを非表示にするのには適していないと思います。最後に言った理由。

.texthidden{　　display:block;　　overflow:hidden;　　width:0;　　height:0;}

4. positon:absolute;

絶対配置を使用して、可視領域の外に押し出します。ただし、可視性は存在しませんが、物理空間を占有します。逆に、マージン属性を配置するために絶対座標を使用することは個人的には好みません。異なるブラウザでは常に予期せぬバグが発生します。

.texthidden{　　positon:absolute;　　margin-top:-9999px;　　margin-left:-9999px;}

5. text-indent:-9999px;

h1 をブロックとして表示し (display:block;)、長さと幅 (画像と同じサイズ) を指定します。そして、「h1 の背景画像」を指定して、h1 タグの背景として必要な画像を使用します。 h1 タグに挿入されるのは文字形式のブログ タイトルのままで、テキストを画面上で見えなくなるようにするには、9999px で十分です。大きなバー。

h1 a{　　height:30px;　　width:165px;　　float:left;　　text-indent:-9999px;　　background-image:url(images/logo.gif);　　background-repeat:no-repeat;　　display:block;　　position:relative;}

a9f493b10a6996b3124909c863ff7432js アシスタント5db79b134e9f6b82c0b36e0489ee08ed

03669b25baaac77f19d5e56043e919493499910bf9dac5ae3c52d5ede7383485 リンクをクリックすると、点線のボックスが生成されますが、問題ありません。ボックスは背面画像のサイズのみです。ただし、Firefox にはいくつか問題があり、インデントされたテキスト範囲も含まれており、あまり美しくありません。

そのため、クリック時に生成される点線枠をスクリーンオフする必要があります。点線枠の方法は、IE と FF の画面で異なります。 IE が使用するトラバーサル メソッド (HTC、CSS 式) はシステム リソースを消費しますが、FF の下の点線ボックスを非表示にするだけで済み、IE はそれを無視します。 Firefox のリンク。

a{　　outline:none;/*去掉Firefox点击时产生的虚线框*/}

追記: 本文全体は単に著者の見解であり、この問題を解決するために text-indent:-9999px; を使用することが可能かどうかについては、賛成する人も反対する人もいます。したがって、まださらなる議論が必要です。