ChromeとFirefoxでの表示の違い

WordPressでのサイト作成。

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

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

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

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

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

Googleさんお願いします。

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

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

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

次回はのために

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

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

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

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

“ChromeとFirefoxでの表示の違い” への2件の返信

  1. ブラウザ間の表示の差異を吸収する手段としてCssのメタ言語であるSassをベースにしたCompassという環境が有用かと思います。
    私も最近知ったばかりなのですが、これからのウェブサイト作りには無くてはならないものになりそうです。今度compassについての記事を書いてみようと思っています。
    ピンバックありがとうございました♪

    1. コメントありがとうございます。
      (遅くなり申し訳ありませんm(__)m)

      Compass全くコトバすら知らなかったです。
      今ちょっと調べましたが、便利そうですね。

      覚えるにはそれなりに時間もかかりそうですが
      書いているうちにごちゃごちゃのCSSになってしまう身としては
      しっかり時間をとって便利ツールを覚えることも
      後々はよさそう。

      Compassの記事楽しみにしております。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です