CSSの小数点以下の数値を各ブラウザはどのように解釈するか
公開：
CSSで小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。
調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10となっています。調査にはブラウザ付属の調査ツールを使いました。
表が見づらいかもしれませんが、我慢してください。
なお、これはどうレンダリングされるかなどは考慮していません。
その指定がどう解釈されるかだけを調べたものです。
指定した値についてですが、但し書きがない場合は フォントサイズをパーセンテージ指定。 IEは小数点以下第2位まで。それ以降は切り捨て。 フォントサイズをフォント相対値で指定。 対応しているものについてはパーセンテージと同じ。 フォントサイズをビューポート相対値で指定。 対応しているものについてはパーセンテージと同じ。 フォントサイズを絶対値で指定。 cm, in, ptについては、IEは小数点以下第3位まで。第4位以降は切り捨て。 IEが小数点以下第6位まで。第7位で四捨五入。第8位以降は無視。 IEはこれだけだと調査不足な感じがする……。 Opera以外はパーセンテージと同じ。 数値をいじっていると、Firefoxは小数点以下の四捨五入ポイントが変わったりすることがあるのに気づきました。1.5555555555です。Percentage
IE 9 IE 10 Firefox Chrome Opera % 1.55 1.55 1.55556 1.5555555555 1.56
Firefoxは小数点以下第5位まで。第6位で四捨五入。第7位以降は無視（※記事の最後に注意書きがあります）。
Chromeは指定と同じ。
Operaは小数点以下第2位まで。第3位で四捨五入。第4位以降は無視。Font-relative lengths
IE 9 IE 10 Firefox Chrome Opera em 1.55 1.55 1.55556 1.5555555555 1.56 ex 1.55 1.55 1.55556 1.5555555555 1.56 ch 1.55 1.55 1.55556 非対応 非対応 rem 1.55 1.55 1.55556 1.5555555555 1.56 Viewport-percentage lengths
IE 9 IE 10 Firefox Chrome Opera vw 1.55 1.55 非対応 1.5555555555 非対応 vh 1.55 1.55 非対応 1.5555555555 非対応 vmin (IE 9: vm) 1.55 1.55 非対応 1.5555555555 非対応 vmax 非対応 非対応 非対応 非対応 非対応 Absolute lengths
IE 9 IE 10 Firefox Chrome Opera cm 1.555 1.555 1.55556 1.5555555555 1.56 mm 1.55 1.55 1.55556 1.5555555555 1.56 in 1.555 1.555 1.55556 1.5555555555 1.56 px 1.55 1.55 1.55556 1.5555555555 1.56 pt 1.555 1.555 1.55556 1.5555555555 1.56 pc 1.55 1.55 1.55556 1.5555555555 1.56
それ以外はパーセンテージと同じ。Angles
transform: rotate()に各角度単位を指定。IE 9 IE 10 Firefox Chrome Opera deg 1.555556 1.555556 1.55556 1.5555555555 1.56 grad 1.555556 1.555556 1.55556 1.5555555555 1.4deg rad 1.555556 1.555556 1.55556 1.5555555555 89.13deg turn 1.555556 1.555556 1.55556 1.5555555555 560deg
FirefoxとChrome はパーセンテージと同じ。
Operaはなぜか全てdegに変換されたが、小数点以下の扱いはパーセンテージと同じっぽい。Times
animation-delayに各時間単位を指定。IE 9 IE 10 Firefox Chrome Opera s 非対応 1.55 1.55556 1.5555555555 1.56 ms 非対応 1.55 1.55556 1.5555555555 0s
Operaはs指定はパーセンテージと同じだがmsがsに変換された。100ms, 10ms指定はそれぞれ0.1s, 0.01sに変換されるのでミリ秒単位が使えないわけではないが、5ms以下のミリ秒は0sに変換される。まとめると0～5msが0sに、6～9msが0.01sとなる。Firefoxでの注意点
どうやら小数点以下第何位という解釈ではなく、数値の桁数で判断しているように見えます。
下記の表ではフォントサイズをpx指定しましたが、Firefoxはどの単位でも同じようになります。
（他のブラウザはそれぞれの単位を参照）IE 9 IE 10 Firefox Chrome Opera 1.5555555555px 1.55 1.55 1.55556 1.5555555555 1.56 10.5555555555px 10.55 10.55 10.5556 10.5555555555 10.56 100.5555555555px 100.55 100.55 100.556 100.5555555555 100.56 1000.5555555555px 1000.55 1000.55 1000.56 1000.5555555555 1000.56 10000.5555555555px 10000.55 10000.55 10000.6 10000.5555555555 10000.56 100000.5555555555px 100000.55 100000.55 100001 100000.5555555555 100000.56 1000000.5555555555px 1000000.55 1000000.55 1000000 1000000.5555555555 1000000.56
チェックに使用したファイルはこちらです。
誤りがありましたらご連絡ください。