HTMLとCSSだけでマウスオーバで背景画像が変わったりするメニューの新しい作り方 新しくなくても気にしない

IE8を相手にした時に当たった問題
li の中にあるaに対してマウスオーバで画像を切り替えたい
aの中にはテキストが入っていて、それは表示したくない

それをやるときに良くやられている方法が
aをブロックにして、ネガティブなtext-indentで画面のずっと向こうにテキストを追いやる方法です

なぜかIE8でそれがうまくいかなかった事があったので、新しい方法を考えた。

<ul id="globalnav">
  <li><a href="menu1">menu1</a></li>
  <li><a href="menu2">menu2</a></li>
  <li><a href="menu3">menu3</a></li>
  <li><a href="menu4">menu4</a></li>
</ul>

こんなグローバルメニュー 良く作ります
マウスオーバで画像を変えたり、そんな事をしたいとき
よくやるのがこんな方法

css

#globalnav li {
  width:120px;
  height:38px;
  list-style:none;
  float:left;
}

#globalnav li a {
  display:block;
  width:100%;
  height:100%;
  text-indent: -9999px;
  background-image:url(menu.png);
  background-position: なんか適当に
}

#globalnav li a:hover,#globalnav li a:active {
   background-position: なんか適当にちょっと上にやったり、左にやったり
}

IE8でaに対するマウスオーバがテキストの上に来ないとあかん(hover,activeにならん)みたいな事もあって
text-indentで文字を見えないところまでやってしまっているのでさぁ大変
こんな問題にぶち当たったので、こんな書き方してみた

#globalnav li {
  width:120px;
  height:38px;
  list-style:none;
  float:left;
}

#globalnav li a {
  display:block;
  width:100%;
  height:100%;
  text-indent: -9999px;
  background-image:url(menu.png);
  background-position: なんか適当に
}

/* star hack */
* html #globalnav li a {
  font-size:120px; /* ブロックの幅と同じサイズを指定 */
  filter:alfa(opacity:0);
  text-indent:0px;
  float:hidden;
}

#globalnav li a:hover,#globalnav li a:active {
   background-position: なんか適当にちょっと上にやったり、左にやったり
}

何をしているかと言うと
display:blockになったaタグめいっぱいに文字をでっかくして、
不透明度を0にすることで、見えない状態にしています。
こうすることで、見えないだけでブロックいっぱいにテキストがあるので、
マウスオーバが効くようになりました。
IE以外には普通にtext-indentで左に飛ばしてます。