日報 #75 - IEでfont-size: 62.5%; を使ったremが怪しい件

さぁ日報と称して、重箱の隅をつつくような細かい話がはじまるよ！
IEまわりのrem話とかいう世界的にもホットな話がはじまるよ！

ほふく前進ブログを書き連ねる日々に限界を感じないわけないので、
他のエンジニアにも代筆を呼びかけております。
少なくとも僕は楽しみです。

さて前向きな話している場合じゃないですよ。
重箱の隅をつつかないと、話が始まりません。
気になる今日の話題は、
「IEでのrem⇔px計算は小数点が絡むと厄介」
というか、不敗の帝王だと思われていた、
「font-size: 62.5%; では1rem⇔10pxの変換」
は結構怪しい。

IE9で確認しましたが、
htmlのfont-sizeを62.5%にして、1remにしたら10pxというのが世界的常識ですが、どーやらIEではそうでもないようです。

html { font-size: 62.5%; }
div { width: 1rem; } /* 10pxのはずが9.92pxと計算されちゃう */

まだあんまり自信ないですが（確認したのがMac上のVirtualBox IE9, IE10のみ）
このようになるケースは確かに存在するようです。
色々テストした結果、1つの予想が。
どうやらIE系は小数点2桁以下は無視するようで、
62.5%即ち、0.625は（多分）0.62と解釈されるようです。
9.92pxになってしまったのは、
10px * 0.62 / 0.625 = 9.92
という計算結果と予想するに至ったわけです。

んでまぁ、困るわけです。
でもどうしていいかよく分からんわけです。
いくつか試した結果、CSSのマイナーな機能calcを用いて、

html { font-size: calc(1em * .625); }

こうすると解決しました。
きっちり1rem10pxと出力されます。
なんでこれなら通るのか、計算結果が内部数値的に適応されるから、
レンダリングの際の小数点切りにならないとか、そういう理由なのでしょうか。

まぁとりあえずこれでなんとか、、、
という対応が積み重なるとバグの温床になるので、
近日中に必ずしっかりと対応します。
ではでは。