スタイルシートで font-size や line-height を小数点以下の値をもつ数値で指定した場合、いわゆるWebKit系ブラウザでの振る舞いだと、これらは少数点以下を切り捨てたpx値で表示されるのだな。
対して Firefox や Internet Explorer は、小数点第一位を四捨五入した値で表示されるようだ。
<style>
#test{
font-size:40px;
line-height:1.02em;
}
</style>
<div id="test">
あ
</div>
#test{
font-size:40px;
line-height:1.02em;
}
</style>
<div id="test">
あ
</div>
…というソースを表示させてみます。
div#test の計算上の高さは 40(px)*1.02(em) = 40.8(px)。
実際上「小数点以下のpx値」を表示することはムリなので、ブラウザは表示の際に値を丸めることになるのですが、この div#test の実際の画面表示上の高さを offsetHeight を取得して確かめてみると、
Chrome、Safariなどでは 40(px)、
Firefox,IEなどでは 41(px)
Firefox,IEなどでは 41(px)
になります。
これは例えば、
<style>
#test{
font-size:40.8px;
line-height:1em;
}
</style>
<div id="test">
あ
</div>
#test{
font-size:40.8px;
line-height:1em;
}
</style>
<div id="test">
あ
</div>
…というソースの表示でも同じ値となりますね。
で、ここで試しに getComputedStyle() で div#test の height を取得してみると、
Chrome、Safariなどでは 40px（画面表示上の値）、
Firefox,IEなどでは 40.8px（計算上の値）
Firefox,IEなどでは 40.8px（計算上の値）
という値が返ってきます。うーん。
「実際に画面上で表示されているサイズ」を知りたい場合は、getComputedStyle()（←あ、これってFirefoxやIEでは文字通り "計算した値" ってことだわな）で height を取得するのではなく、offsetHeight を取得せよ、と。
これらに対し、div#test の height をスタイルシートで以下のように指定してみると、
<style>
#test{
font-size:40px;
height:1.02em;
}
</style>
<div id="test">
あ
</div>
#test{
font-size:40px;
height:1.02em;
}
</style>
<div id="test">
あ
</div>
…この場合はChromeもSafariもFirefoxもIEも div#test の高さ（offsetHeight）は「41px」、つまり「切り捨て」ではなく「四捨五入」した値で画面表示されるのですな。
こんな細かい部分が問題になる場面というのは殆ど無いと思うのですが、切り捨てか四捨五入か、どちらかに処理を統一してもらいたいな、と思う今日この頃。
コメント