ChromeとFirefoxでの表示の違い

WordPressでのサイト作成。

半年くらい前からメインにChromeを使い始め、今回のサイト作りも主にChromeで。

Firebugの便利さは離れ難いわと思っていたけれど、Chromeのデベロッパーツールにも慣れて来たところ。

IEの表示も問題ないし、よ〜し完成!と思ったら、FFでサイドバーにレイアウト崩れ発見。

IEとFFは表示が違うよねって言うのは今までも経験済みで、特に驚きはなかったんだけど、なんか勝手にChromeでOKならFFでもOKだと思い込んでた。

ChromeにFirebugみたいなマージンサイズが確認できるレイアウトウインドウはない。縦横にスケールは表示されるけど、どうやって細かい目盛を読めと言うのか、、、

Googleさんお願いします。

デベロッパーツールにもレイアウトが画像で確認出来る機能を付けてください。

と願ってみてもどうしようもないので、Chrome⇔FFを行ったり来たりしてなんとか修正。

今回はフォームのテキストエリアのサイズが%指定だったので、その値を小さくすることで解決したけど、本当にこんな方法でよかったんだろうか?

次回はのために

ズレた画像と修正前後のコード取っておけば良かった。

しばらくして忘れた頃にまた同じ問題にぶち当たりそうだ。。。

今回は使わなかったけど、ブラウザの表示を調整するCSSハックがまとめてあるサイトを発見したのでメモ。

ブラウザ間の見た目がどうしても同じにならない!!CSSハックと条件付コメントを使ってみる。