今製作中のサイトはPNGスプライトを使ってます。
それ自体は別に問題ないんですが，全部1枚に入れちゃったので場所によって背景色とかが変わるから透過画像にしたんですよね。
まぁ当然IE6で色抜けないわけで，なんかいろいろな方法がアルらしいんですが，
DD_belatedPNGを使うのが一番楽らしいってことで，これをつかうことにしました。
とりあえず背景画像をロードするクラスをつくって，スプライトを使う要素については，
背景のクラスと個別要素のクラスってわけてたので指定はらくちん。
css
.get-sprite-Index {
background:url(‘hogehoge.png’) no-repeat;
}
.logo {
width:200px;
height:50px;
background-position:-200px 0;
html
<!– jQuery Initialize –>
<script type=”text/javascript” src=”initialize.js”></script>
<!–[if IE 6]>
<script type=”text-javascript” src=”js/DD_belatedPNG.js”></script>
<script>
DD_belatedPNG.fix(‘.get-sprite-Index’);
</script>
<![endif]–>
で，こんなかんじで書いたらちゃんと背景が透過されました。
透過されましたがたくさんある要素のうち最初の1個、つまりこのロゴ部分だったんですが、
こいつだけなぜかうまく動作しない。
透過はされるんだけど、背景が左上から20ｘ20ピクセルくらいしか表示されない。
クラス名かえたり，IDにかえてみたり他の動いてるところからまるっとコピペしてもうごかない。
なんだこれ？とおもっていろいろ調べてみたら，なんかバグかなんかがあるのかな？
環境によって100パーセント動かなかったり，何回かに1回はちゃんと見えたりとまちまちらしいですが。
回避するにはjQueryみたいにコードを /body の直前に書けばいいらしい。
ということで早速移動。ボディ閉じる直前にもってきたところ，
ページの読み込み中になんかちょっとロゴの要素の部分がぐちゃぐちゃーってスプライトの中身がみえちゃうけどページが全部読み込み終わる頃には綺麗に表示されました。
もちろん背景も抜けてます。
何度かリロードしたけど問題なく動作してるみたいなので多分大丈夫でしょう。
読み込み中ちょっと汚くなるのはIE6でも動くようなプリローダー風のjQueryプラグインでも探して入れればいいかな？
