今さらですが、「text-indent: -9999px」に対応しました。

ホームページの中で、画像置換をよく使います。
メニューのグローバルナビゲーションには、欠かせないですね。

その画像置換の方法に使っていたのが、「text-indent: -9999px」です。

画像置換には、JavaScriptを使う方法もあるのですが、ソースが
キレイでないので、あんまりJavaScriptは好きでありません。
（JavaScriptを外部ファイルにすればいいだけの話でもありますが・・・。）

なので、画像置換にはCSSを使った「text-indent: -9999px」をしていました。

※「text-indent: -9999px」の画像置換とは、ある箇所のテキストを
-9999px外に移動させて見えなくして、そこに背景画像を表示させる
方法のことです。

なのですが、「text-indent: -9999px」はあんまり評判が良くないんですよね。
年明けすぐに

いまさら「text-indent: -9999px」におびえるWeb担当者（私） | SEOもっと！

という記事を読んで、そうかやっぱり良くないか・・・。
でも、決定的なことではないので、そのままにしていました。

しかし、またまた

内的要因について　xhtml / html / css編｜Sphinn Japan Blog

と書いてあるので、あんまりこのことで反応し続けるのも
嫌なので、とうとう違う方法を試してみることにしました。

いろいろ検索して見つけたのが下記の方法です。

DN*BLOG » Blog Archive » text-indentを使わない画像置換テクニック

いやあ勉強になりますね。

ただこれでブラウザーチェックをしてみると、何故かIE6だけ
がテキストが消えません。参考したサイトをIE6で見ると
消えているのですが、自分のサイトでは消えません。。。

そこで解決策を探して見つけたのがこちら。

IE6の透過PNGメニューロールオーバー

『_』は使うのが始めてなので、意味を確認したらIE5以下への
ハックなんですね。

hail2u.net - Weblog - CSSの識別名にアンダースコアを使う


そして、作った画像置換のCSSがこちらです。

h2{
background-image:url(画像のURL);
background-repeat:no-repeat;
height:0px;
padding:43px 0px 0px 0px; /* 上から画像の高さだけ下に落としています */
margin:0;
width:578px; /* 画像の横幅を指定しています */
overflow:hidden;
　　_height: 43px; /* IE6でのa要素の高さを画像の高さに指定しています */
}

css Vaildにするなら

h2{
background-image:url(画像のURL);
background-repeat:no-repeat;
height:0px;
padding:43px 0px 0px 0px; /* 上から画像の高さだけ下に落としています */
margin:0;
width:578px; /* 画像の横幅を指定しています */
overflow:hidden;
}

* html h2{
　　height: 43px; /* IE6でのa要素の高さを画像の高さに指定しています */
}

※画像置換をh2で指定していたので、そのままにしていますが、
hでなくても、もちろん大丈夫です。

グローバルナビゲーションでは

#g_navi li a {
height:54px;
width:auto;
display:block;
float:left;
text-indent:-9877em;
overflow:hidden;
}


↓

#g_navi li a {
height:0px;
width:auto;
display:block;
float:left;
overflow:hidden;
padding-top:54px;
　　_height: 54px;
}

css Vaildにするなら

#g_navi li a {
height:0px;
width:auto;
display:block;
float:left;
overflow:hidden;
padding-top:54px;
　　_height: 54px;
}

* html #g_navi li a {
　　height: 54px; /* IE6でのa要素の高さを画像の高さに指定しています */
}

この変更でできました。

いちおうブラウザーチェックは、ウィンドウズ環境でですが、
IE6、IE7、FireFox、Safari、Google Chrome で確認済みです。

自分のホームページで使ってみたのですが、もしおかしな
ことになっていたら、よかったら教えてください。

ホームページ制作『LifeTrackBack』（東京）


補足
こんな方法もあります。

CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ

この方法だと、空タグが気になってしまうので、あんまり
やりたくないんですよね。

補足2
『_』の記載がCSS Validな表現ではなかったようなので、
CSS Validなものを追記しました。