Web

chrome/IE/FireFoxのサイズ解釈

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

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

検証

コードは以下です。

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

テキスト

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

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

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

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

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

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

うーん厄介。

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


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

ピックアップ記事

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

関連記事

  1. Web

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

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

  2. Web

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

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

  3. Web

    【Brackets】コーダーオススメのエディタはブラケッツ一択!

    みなさんエディタは何を使っていますか?そもそもエディタとは、端…

  4. Web

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

    今まで自宅の環境ではHDMIかVGAを使用していたのでDisp…

  5. Web

    ダウンロードとインストールってなにがどう違うの?徹底解説してみた

    パソコンに詳しくなくてもダウンロードとインストールって聞いたことありま…

  6. Web

    Surface Lapotopのキーボード素材、アルカンターラとは?

    アルカンターラってなんぞや?って人がほとんどだと思います。自分…

コメント

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

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

最近の記事

  1. Other

    有り金をはたいてbeatsヘッドフォンを買ったけど音質が・・・【レビュー】
  2. Web

    【ace.js】エディタを複数表示させる方法
  3. Web

    Googleform埋め込みで回答完了画面に遷移させない方法
  4. Web

    【Brackets】必ず入れるべき拡張機能5選
  5. Web

    2018年9月現在もSurface LapotopのWindows10Proへの…
PAGE TOP