HAL99の徒然日記にて、以下のような文章が書かれていました。以下、要約転載。
「スペースステーション」と「ヒット」のページが背景が濃いブルーで字が黒なので、すごく読みずらい。
IEでみるとすごーく見やすいデザインに
普段Mozilla(1.3)でしかブラウジングしてなかった。
えー!
そんなブラウザ依存のソースの書き方なんかしていないのにと思って、慌ててMozillaでチェック。確かに変な風に表示されています。そんな馬鹿な!
ソースコード的には変なところはないのに、なぜそんなことになるのか、慌ててソースコードの絵バッグを始めました。
数分後、Mozillaのデバッグを始めました。
原因が判明。Mozillaでは、以下のコメント文の書き方をすると、ソースコードの解釈に不具合が発生します。以下、例
<!-------------------------------------------------------------------------->の場合は、こう表示されます。
-------------------------------------------------------------------------->もう少し具体的に書きます。
<!--任意の文字+「-」を70回以上-->こう書くことで、以下の赤字の部分のみしか解釈されなくなり、青字の部分がコメント外の文章とみなされます。
<!--任意の文字+「-」を70回以上-->そのため、こういった文章を書くと、青字の部分が全てコメント内の文章として、ブラウザの表示から抜け落ちます。
<!--任意の文字+「-」を70回以上-->なので、レイアウト全滅状態になります。ぐはっ!
こんなバグ知りませんでした。
というわけで、クロスブラウザチェックは大切だとあらためて思いました。理論だけではなく、実践も大切だと。初心に戻らないといけませんね。
掲示板で指摘がありましたので以下追記修正。
以下、参考リンクです。
古いHTML(2.0)では -- 一個ごとにコメント内、コメント外が切り替わり、新しいHTML(4.0)やXHTMLでは余分な -- をコメント内に書いてはいけないそうです。
とはいえ、全データを変更するのは大変なので、表示上まずい部分だけ修正しておくことにします。まだまだ、知らないことが色々とあるようです。不勉強でした。次回作るページからは大丈夫です。