Q&A
line-heightも統一しているのでしょうか？
レスポンシブ対応のサイトを作成しており、大きさの単位にremを採用したいと思っております。
文字サイズだけではなく、要素の高さにもremを採用した部分を作成できたらと思い、設定したところIE(11)のみ、ChromeやFireFoxと違う挙動になっており困っております。
具体的には
2remの文字サイズを指定した要素の高さを3rem(内余白込み，内余白上下0.5rem)の様に設定したところ
Chrome,FireFox 48px
IE11 34.38px
となってしまいます。
html(Root)に62.5％を指定し、1remを10pxに合わせても同様にIE11のみ30pxにならず小さくなってしまいます。
だいたい1.4倍程と40％近い差が発生するのですが、IE11のremの高さ基準となっているのは何なのでしょうか？
とてもRoot(HTML)の文字サイズとは思えません。
またこれを回避し、ChromeやFireFoxと同じ挙動にするための対処法はありませんでしょうか？
高さを指定したい要素のdisplayの値はなんですか？block？inline-block？table-cell？事象を再現できる最低限の構成のソースコードを記載してもらえると検証しやすいかと思います。
互換表示になっていませんか？
回答2件
0
自己解決
急な仕事が立て続けに入り、全くこちらの更新が出来ない状況が続いてしまい、本当に申し訳なくお詫び致します。色々とアドバイス頂いたことありがとうございました。
結果から申し上げると「display: flex;」を使用していた事が思う様にいかなかった原因ではないかと推測しています。
試行錯誤の末「display: flex;」を外したところ意図した通りの結果になりました。CSSは他にも変えた所もあるので完全に断言は出来ませんが、思い出せる限りの変更箇所を検討した結果です。
「spookybird」さんのアドバイス通り「display」の設定が最も正解に近かったと思います。あの少ない情報の中、有効なアドバイスを頂き本当にありがとうございました。
投稿2018/10/16 08:53
総合スコア6
0
html(Root)要素のフォントサイズは絶対数(px,pt)で指定する必要があります。
相対数(%,em)で指定した場合、各ブラウザが持つ初期値のフォントサイズに依存してしまいます。
「rem」は、
1remでhtml(Root)要素のフォントサイズの100%
1.2remでhtml(Root)要素のフォントサイズの120%
です。
なお、「em」は、
1emで自身の要素のフォントサイズの100%
1.2emで自身の要素のフォントサイズの120%
です。
上記で上げて頂いた例の場合、html(Root)要素のフォントサイズが相対数(62.5％)で指定されているため、
各ブラウザが持つ初期値のフォントサイズに依存してしまい。
40％近い差が発生しています。
投稿2018/09/13 12:58
総合スコア10
あなたの回答
tips
プレビュー
