ＣＳＳのfont-sizeには、いろんな単位を指定できますが、
その中のemと%の違いがよくわかりません。
このサイトのＣＳＳの説明の、単位と色というところを見ると、
emは現在のフォントサイズを1とした相対指定
%は現在のフォントサイズを100%とした相対指定
となっていました。
ということは、
font-size : 2em と
font-size : 200% は
同じ大きさになると思ったのですが、テストしてみると違う大きさで表示されました。
どちらもＩＥの文字のサイズを中にしてみると同じ大きさなのですが、
一段階変えただけの小や大でもかなり違う大きさになってしまいます。
そこで質問なんですが、
font-sizeを指定するときのemと%はなにが違うのですか？
それと、現在のフォントサイズとは何が基準になっているのでしょうか？
夜も眠れないほどではないのですが、気になってしかたがありません。
%はそのまま割合で増減指定できます。
0←1em
00
00←2em
000
000
000←3em
わかりますか？
なので、相対的に指定できることになります。
>どちらもＩＥの文字のサイズを中にしてみると同じ大きさなのですが
これは偶然です。
主にDTP業界で使われる単位だと思います。
うわ・・めちゃくちゃ。
要はフォントの高さを基準に等倍するんです。
font-size の場合に限っては、
・emは親要素のフォントサイズを1とした相対指定
・%は親要素のフォントサイズを100%とした相対指定
です。
http://www.w3.org/TR/REC-CSS1#font-size
また、「親要素のフォントサイズ」というのは、親要素での計算値ではなく、実際に表示に使ったサイズです。（計算値から適当に丸めた値）
親要素に表示する文字がなかった場合には、計算値かＵＡ任せになって
しまうでしょう。（ＩＥでおかしく見えるのはこのせい？）
なので、
body { font-size: 100%; }
などを入れておくと、少し改善するはず。
「なので、」が繋がってないか。まあ、適当に考えてくださいまし。
えぐぜさん、＋αさん、回答ありがとうございました。
font-sizeが親要素を基準にするのはすぐに理解できました。
しかし、emと%でフォントの大きさが異なるということが、いまいち納得できません。
emがフォントの高さを基準にしているのはわかったのですが、
%はなにを基準にしているのでしょうか。
私の考えでは、高さを基準に２倍しようが、ほかの何かを基準に２倍にしようが、大きさは同じにならないとおかしいと思うのですが。
それとも、おかしいのは私の頭なのでしょうか…
あと1emと指定すれば、そのままの大きさになるはずですよね。
body{font-size:1em;}と、何も記述しないのとで大きさが異なるのはどうしてでしょうか？
もしかして、おかしいのはＩＥなのでしょうか？
ぶっちゃけた話、IEの実装がおかしいということです。
よこやりのようですが、
emとは「M」のことで、
「フォントの高さを基準にしている」という時のフォントとは「M」の高さのことだと思います。
（ちなみに写植・DTPでは 1000em = 「M」の高さです。）
>「フォントの高さを基準にしている」という時のフォントとは「M」の高さのことだと思います。
勉強になります。φ(．． )メモメモ
>ぶっちゃけた話、IEの実装がおかしいということです。
おかしいのはＩＥですか…。
ＮＮで試してみたら、まったく私の期待通りに表示されました。
最初から両方のブラウザでテストしろって感じですね…。
とりあえず、今まで知らなかったemの意味がよくわかり勉強になりました。
回答してくださった皆様、ありがとうございました。
あとは自分でいろいろ試してみようと思います。