Web

chrome/IE/FireFoxのサイズ解釈

ブラウザごとにmargin(マージン)の間隔が違うことは以前から知っていましたが、

絶対値指定か相対値指定かで差分がでて表示崩れがおきたのでメモしておきます。

検証

コードは以下です。

以下を各ブラウザの検証ツール(デベロッパー・ツール)で確認してみてください。

テキスト

各ブラウザごとで高さの数値が変わっていると思います。

まぁこれはheightを当てれば揃いますが組み方によってはそれで対応できない場合もあるので気を付けなければいけません。

どうしてこうなるのかはブラウザごとで小数点以下の数値の扱いが違うからなんですね。

「em」を使用するとどうしても小数点以下が発生してしまうので各ブラウザごとで挙動が変わってしまいます。

この場合のline-heightは「em」ではなく「px」等の絶対値で指定すれば揃います。

↑この情報がまちがってたらごめんなさいm(__)m

うーん厄介。

ちなみに参考にしたサイトが他にあったんですが情報が古く書いてある通りの挙動ではなかったので、もしかするとアプデとかで仕様が変わったんですかね・・・


※参考
CSS の小数点以下の数値を各ブラウザはどのように解釈するか

ピックアップ記事

  1. Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法
  2. 目標がない人はやりたいことリスト100をやってみよう
  3. 新しいことへのあと一歩の勇気が出ない人へ「勇気はあとからついてくる。」

関連記事

  1. Web

    メモ帳ソフト”CatMemoNote”の設定から使い方まで解説!

    Catmemonote(キャットメモノート)とはCatMemoNo…

  2. Web

    Googleform埋め込みでラジオボタンのデータを送信する方法

    Web制作している人間なら誰しもフォームでつまづくと思います。(つまづ…

  3. Web

    レンタルサーバー探してるならCORESERVER使ってみて!

    ブログを始めるならCORESERVERを使おう!もともと私はデータ…

  4. Web

    Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

    今回はGoogleform埋め込みで回答完了画面に遷移させない方法…

  5. Diary

    ポートフォリオサイト作成しました。

    わざわざ大々的に言う必要もないんですが、PORTFOLIO(ポートフ…

  6. Web

    非同期(Ajax)でPHPの関数を実行させサーバーにフォルダとファイルを作成する

    最近PHPを勉強し始めたので備忘録がてら書きます。今回は、H…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Web

    圧縮ファイルの種類別紹介!
  2. Web

    ディスプレイポートとは?HDMIと比較・メリット紹介!
  3. Diary

    Canon EOS Kiss X8iで撮影したポートレート写真
  4. Web

    画像1枚なおしただけでAdSense審査に通過した話
  5. カメラ/写真

    【スタビライザー】Flycam(フライカム) C6買ってみた
PAGE TOP