先日来、メインブラウザであるOperaと併用して
Firefoxを使用するようになった経緯をお伝えしてきたが、
実はFirefoxを使い始めて、いくつかの自サイトで
レイアウト崩れがあることに気づいた。
原因を調べてみると、要するに単純な記述ミスで、
複数の入れ子状態のDIVタグの閉じ忘れであることが判明。
開設時には複数ブラウザで表示確認をしているので、
その後、細かな修正をしているうちに抜け落ちてしまったらしい。
問題なのは、Operaではこうした記述ミスがブラウザ側で補完されてしまい、
ずっと気づかずにいたことだ。
すなわち、FirefoxやIEで訪れた人には崩れたレイアウトのまま、
放置していたわけだ。
正しく表示されることが、実は異常だったという、何ともおかしな自体。
ブラウザ側で記述ミスを補完し正しくレンダリングしてくれるのは、
一見便利な機能のように思えるが、
我々のようにWEBサイトを構築する側からすると迷惑この上ない。
前述したように、ミスがあっても気づかないためである。
改めて複数のブラウザでチェックする重要性を痛感した。
似たようなことで、FirefoxやIEでは正しく表示されるのに、
Operaではレイアウトが崩れるといった事態にも遭った。
こちらの原因は、記述ミスというよりブラウザ毎の特性の違いのようで、
ブロック要素内に収まりきらない長い英単語や文字列が
含まれていたために起こった現象だった。
通常、英単語などは単語の区切りで改行されるので、
一単語がブロック幅以上だとはみ出るのだが、
FirefoxやIEではCSSで指定しなくても自動改行される仕様のようだ。
※バージョンによって仕様の違いがあるかも知れない。
CSSで該当するブロック要素に、
「word-wrap:break-word;」を記述して無事解決。
さらにはFirefoxだけでscriptタブの一部が
表示されてしまうという不具合も発生。
この原因はHTMLのコメントアウト(<!-- -->)の記述の仕方にあったようだが、
面倒だったのでコメントアウト行をすべて削除することで対処してしまった。
恐らくは--の後ろの半角スペースがないのが原因だと思われる。
というわけで、今後もクロスブラウザ対応には頭を悩まされる状況が続きそうだ。