1

ボタンのhtmlタグでボタンを作成しました。今、高さと幅をemで作ろうとしています。16pxは1emに等しいことを知っています。そのルールは、ボタンを除いて、これまで見てきたすべてに適用されます。ボタンの高さを 45px にしたい場合、ボタンの高さは 45px になります。45px を em に変更したい場合、これは 2.8125em になります。それはずっと短いでしょう。em で 45px に近づけるには、実際には 3.5em 前後になり、px では実際には 56px になります。何故ですか？それはブラウザの問題ですか？ちなみに私はサファリを使っています。

4

6 に答える 6

6

em問題の要素の font-size に等しい。ボタンの font-size が16pxとem異なる場合、同様に異なります。

これまで見てきた要素はすべて、font-size を 16px に設定する必要があります。これは多くのブラウザのデフォルトであるため、それほど驚くべきことではありません。

于 2013-01-10T15:54:23.737 に答える
2

私は16pxが1emに等しいことを知っています。

それは違うの。unil1emは特定のピクセル値に対応しておらず、要素の現在のフォントの文字サイズに対応しています。

ボタンのフォントはデフォルトで異なります。ボタンのフォントを設定すると、慣れたサイズになります。

ただし、サイズを特定のピクセル数にしたい場合は、のpx代わりに単位を使用する必要がありemます。同じフォントファミリとフォントサイズを指定したem場合でも、ブラウザとオペレーティングシステムによって単位が多少異なる場合があります。

于 2013-01-10T15:57:20.550 に答える
2

他の人は、em 単位がピクセルにどのように関係しているかについての誤解について話していますが、根底にある問題は十分に解決されていません。

今日、同じ問題について投稿しましたが、ここで showdev から回答がありました。

基本的に、ボタンには「システムフォント」が適用されており、親のフォントサイズを継承するのを防ぎます。これは、私が見る限り、すべての主要なブラウザーで発生し、「予期される動作」です。

これを克服するには、CSS で、ボタン タグ (または特定のボタンのみ) がフォント サイズを明示的に継承するように指定します。

button {
     font-size:inherit;
}

これにより、扱っている他の要素と同じように em サイズを扱うようになります。もちろん、それによってテキストのサイズも変更されますが、これは問題になる場合とそうでない場合があります...

于 2014-07-02T17:14:31.793 に答える
0

ボタンのline-heightは、他の要素のline-heightとは異なる場合があります。さらに、設定したベースが1emの場合、1emは16pxになります。それは非常にうまくいくかもしれませんが、あなたが与えた説明では私にははっきりしなかったので、私はそれを指摘したいと思います。

于 2013-01-10T15:57:37.747 に答える
0

CSS の単位に関するこのページから:

em と ex の単位はフォントによって異なり、ドキュメント内の要素ごとに異なる場合があります。emは単にフォントサイズです。

emユニットの詳細については、素晴らしい em ユニットとその他のベスト プラクティスを参照してください。

「em」の意味は、長年にわたって変化してきました。すべてのフォントに「M」という文字が含まれているわけではありませんが (中国語など)、すべてのフォントに高さがあります。したがって、この用語は文字「M」の幅ではなく、フォントの高さを意味するようになりました。

CSS では、em 単位は長さを測定するための一般的な単位です。たとえば、ページの余白や要素の周囲のパディングなどです。

最後に、W3 仕様からの定義:

em単位

それが使用されている要素の 'font-size' プロパティの計算値に等しい。

于 2013-01-10T15:55:48.893 に答える
0

1em 等しい font-size デフォルトは 16px に等しい (ブラウザのデフォルトの font-size オプション)

例 

<button style="padding:0;border:0;background:#2f55c3;color:#fff;min-width:4em;height:3em;font-size:1em;">Text</button>

于 2015-11-16T01:52:59.333 に答える