2012年9月25日火曜日

IE6にはホントに悩まされる

ウェブサイトを制作する際、苦労するのはIE6対策です。
もちろんサイトの構成とか色々苦労するところはあるんですけど
最終的にコイツにかなり悩まされるのですよ。

時代はIE9だというのにね。
それでもIE6のユーザーって意外に多いので無視はできません。

ページが長くなったら「ページの先頭へ」っていう
先頭への戻るリンクを設定するのは当然のことなんですけど、
ただリンクを設定するだけだったら一瞬で戻ってしまいます。

やはりここはJavascriptで「するするっ」となめらかに戻りたいなと。
今ではメジャーな方法なのでちょっと調べれば簡単に設置できちゃんですよね。

後々いろんな仕掛けを入れることも考慮して「jquery」を使うことにしました。
良いですね、画面を少しスクロールしたら右下に
「ページの先頭へ」っていうリンクが出てきて、下まで着いてきてくれるし。

ところがですな。
思いもよらないバグが!

コーディング途中っていつもリンクのURLのところをとりあえず「#」を
入れておく癖があるんですよ。
後で確認しながら設定していくのが良いかなって思って。
それがナゼか、CSSの一番最後に設定した「a:link」や「a:hover」が
「#」のところにすべて反映されてしまうんですよ。
「ページの先頭へ」のリンク設定には「#」が入るのでエラいことに。。。

もちろんそのバグはIE6だけ。
IE7以降やChrome、Firefox、Opera、Safari(iPadでも確認)にいたるまで
すべて思い通りの表示になっているというのに。
こんなん初めてですよ。

なんとリンクの設定を「もの凄く真面目に」することでやっと解決。
どういうことかというと、

link、visited、hover、active をこの順番で個別で設定すること

なんですよ。

つまり a:link,a:visited{ } というようにまとめてもダメなんです。
これが分かるまで悩みましたよ。

CSSのコードは多少長くなりましたが、
これでIE6でもバグは出ずに表示されるようになりました。
ただし、「ページの先頭へ」っていうリンクは設定した場所にしか出ませんけど(爆。
ま、もともとフッタの上に設定しようと思ってたのでこれは許容範囲ですよ。
リンクをクリックして「するするっ」とページの先頭には戻ってくれます。

早くIE6が無くなってくれないかなー。
多分Web制作に関わっている方の大半は同じ思いなんでしょうね。