Firefoxを意識してCSSを修正

以前、このブログはFirefoxで表示させるとレイアウトが一部崩れるという記事を書き、近い内に修正するといっておきながら、結局今までほったらかしでした。ようやく昨晩修正してみました＾＾；

問題があったのは全ページに設置しているメニュー。このボックスの右端がサイドバーにかかってしまっておりました。今は大丈夫だと思いますが。

原因というか、その理由はこのメニューボックスの幅を１００％で設定していたからなんですが、IEだとそれできちんと表示されておりました。メインコンテンツ部分に対する１００％なので、普通ならサイドバーにまではみ出ることは無いと思うのですが、マージンなどをいくら調整しようとも、幅が１００％である限り、Firefoxではどうしてもうまく表示されませんでした。

ですからこの幅の設定が影響しているのは確かだったのですが、なぜだめなのかは分かりませんでした。

いろいろやった挙句、結局メニューボックスの幅を明示的にピクセル数で設定することにしました。ここは別にサイズが変動するわけではないので、ピクセル数固定でも問題はありません。最初からそうしてもよかったです＾＾；

この修正で一応Firefoxでも問題なく表示されるようになったはずです。ついでにフォントの設定も片っ端から直しました。ライブドアのテンプレートはフォントサイズの指定にx-smallやxx-smallを使っているのですが、これだとFirefoxではめちゃくちゃ小さなフォントになってしまいます。これをem指定に修正しました。

一通り修正してみるとIEよりFirefoxのほうがなんとなく見栄えがいいような気がします。気のせいかもしれませんが・・・

Comments

コメントお待ちしています。こちらではコメント認証もコメント保留も行っておりません。お気軽にコメントください＾＾