FireFoxでの表示不具合修正 ブログ作成

　現在のデザイン・テンプレートは私の自作です。が、動作確認はMicrosoft InternetExplorer 6 でしか行っておらず、他ブラウザで表示が崩れるということがありました。
　前回、IE7の崩れには対応しまして。今回、FireFoxの崩れをあらかた修正できたと思うので、その原因と対処について報告です。

　まず、どんなところがおかしかったかというと。

○全体が左寄り
○一番上の横タイル模様が、そこかしこに現れている
○記事タイトルが太文字じゃない
○記事タイトルが枠を突き抜けて右にはみ出している
○トップタイトルが右寄り
○trackbackの画像付きタイトルが重なっている
○右上の目次が崩れている

---

　以下、主にスタイルシートの修正です。
　また、すべて検証結果であって、FireFoxやIEの仕様を確認したわけではないんで、そこんところよろしくです。

○全体が左寄り
　原因：FireFoxは"text-align:center"指定でblock要素をセンタリングしない
　対処：<center>～</center>を使用

　IEは、block要素であるdivも、横幅指定で画面幅より小さければ、text-alignでセンタリングしてくれます。まぁ、text-alignはテキストっていうくらいだから、inline要素にのみ有効っていうFireFoxの解釈は間違いじゃないとは思う。

○一番上の横タイル模様が、そこかしこに現れている
　原因："background:inherit"指定で、FireFoxは画像も継承する
　対処：不用意な継承は避け、改めて色指定をした

　1つの修正でそこら中の色指定を変更するのが嫌なので、私は基本的にinherit（継承）を多用しています。外のdivの背景色指定を、中のdivにも適用させるってことなんですが。
　IEの場合、外の背景に画像を指定してあったとき、それを継承しても色だけで、画像は継承されません。しかしFireFoxはそれが継承されてしまったと。これは、FireFoxの方が正しそう。
　まぁ、継承を"background-color:inherit"とかしても解決するかもしれません。試してないけど。
　ちなみに、backgroundのデフォルトはtransparent（透明）らしいので、何か色のついた要素に乗っかっている場合はいちいち色指定する必要はないかと思います。でも一部だけ色なし（ブラウザ基底色）になってやしないかと不安なので、私は念の為全部指定したい派なだけです。それがあだになったわけですがね（笑）。

○記事タイトルが太文字じゃない
　原因：不明（何故かspanで囲んでも囲まれなかった）
　対処：divで代用

　これは原因がはっきり分かりませんでした。とにかく、タイトルだけspanで囲まれず、そのため太文字指定などが効いていなかったのです。
　divを使用したところ、うまく行きました。カテゴリにはspanを使っていて、こちらは正常なのに…。

○記事タイトルが枠を突き抜けて右にはみ出している
○トップタイトルが右寄り
　原因：FireFoxはpadding幅がwidth,heightに含まれない
　対処：padding分だけ幅を縮めた指定に変更

　これは、IEではwidth,height指定の中にpadding指定分の幅を取るのに対し、FireFoxでは外にpadding指定分の幅をとっていたため、FireFoxの方は実際の幅が想定より大きくなっていたことが原因でした。例えば"width:100%; padding:30px;"という指定をしていた場合、IEだと外枠ぴったりに自分の幅を持ち、内側に向かって30px分の余白を取るのに対し、FireFoxでは外枠と同じ幅を持った上で、外側に向かって30px分余白を取ろうとするので、結局外枠をはみ出してしまうのです。
　これはちょっとFireFoxがおかしいと思うんだけど…どうなんでしょう。
　で、トップタイトルが寄っているのは、そもそもの枠が広がったためセンタリングしても寄ってしまったという話。
　以前、IEのバグで文字が表示されなくなる問題があり、その対処のために入れた"width:100%"があだに…orz

○trackbackの画像付きタイトルが重なっている
　原因："float"で回り込み指定をした場合、FireFoxではブロック内部のみ回り込みが行われる
　対処："float"指定をする必要がなかったので削除

　これは、そもそも"float:left"指定を間違って入れていたのが、間接的な原因です。
　しかしその状態でも、IEは何故正常っぽく見えていたのかというと。IEは、表示するだけの幅が足りない場合、要素ごと後ろに回り込むようです。が、FireFoxは、要素先頭の表示だけは開始してしまい（＝要素にボーダーがあったらその上端は書いてしまう）、回り込みは実際の文字データから行うようなのです。
　…色々違うんだねぇ…。

○右上の目次が崩れている
　原因："overflow"指定は、FireFoxではblock要素のみ有効
　対処：spanでなくdivにし、"float:left"指定を追加

　"overflow:hide"ははみ出た分を非表示にする指定なのですが、IEではinline要素であるspanでも有効であるのに対し、FireFoxではblock要素でないと効き目がなかった模様。
　なのでdivにしたわけですが、そうすると各々改行されて縦に広がっちゃうので、改行されないように"float:left"指定を入れました。それで解決。


　結局、だいぶ違うんだなぁというのが感想です。FireFox使用のお方、今までかなり崩れてたんですね…。どうもお見苦しいところ失礼しました。これで幾分マシになったんじゃないかと思います。
　他ブラウザではどうなのか分かりませんが…なんか崩れてたりしたら、お使いのブラウザを教えていただけると幸いです～。