Unformed Building

CSSの小数点以下の数値を各ブラウザはどのように解釈するか

公開:

パーマリンク

CSSで小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。
調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10となっています。調査にはブラウザ付属の調査ツールを使いました。
表が見づらいかもしれませんが、我慢してください。

なお、これはどうレンダリングされるかなどは考慮していません。
その指定がどう解釈されるかだけを調べたものです。

指定した値についてですが、但し書きがない場合は1.5555555555です。

Percentage

フォントサイズをパーセンテージ指定。

IE 9IE 10FirefoxChromeOpera
%1.551.551.555561.55555555551.56

IEは小数点以下第2位まで。それ以降は切り捨て。
Firefoxは小数点以下第5位まで。第6位で四捨五入。第7位以降は無視(※記事の最後に注意書きがあります)。
Chromeは指定と同じ。
Operaは小数点以下第2位まで。第3位で四捨五入。第4位以降は無視。

Font-relative lengths

フォントサイズをフォント相対値で指定。

IE 9IE 10FirefoxChromeOpera
em1.551.551.555561.55555555551.56
ex1.551.551.555561.55555555551.56
ch1.551.551.55556非対応非対応
rem1.551.551.555561.55555555551.56

対応しているものについてはパーセンテージと同じ。

Viewport-percentage lengths

フォントサイズをビューポート相対値で指定。

IE 9IE 10FirefoxChromeOpera
vw1.551.55非対応1.5555555555非対応
vh1.551.55非対応1.5555555555非対応
vmin (IE 9: vm)1.551.55非対応1.5555555555非対応
vmax非対応非対応非対応非対応非対応

対応しているものについてはパーセンテージと同じ。

Absolute lengths

フォントサイズを絶対値で指定。

IE 9IE 10FirefoxChromeOpera
cm1.5551.5551.555561.55555555551.56
mm1.551.551.555561.55555555551.56
in1.5551.5551.555561.55555555551.56
px1.551.551.555561.55555555551.56
pt1.5551.5551.555561.55555555551.56
pc1.551.551.555561.55555555551.56

cm, in, ptについては、IEは小数点以下第3位まで。第4位以降は切り捨て。
それ以外はパーセンテージと同じ。

Angles

transform: rotate()に各角度単位を指定。

IE 9IE 10FirefoxChromeOpera
deg1.5555561.5555561.555561.55555555551.56
grad1.5555561.5555561.555561.55555555551.4deg
rad1.5555561.5555561.555561.555555555589.13deg
turn1.5555561.5555561.555561.5555555555560deg

IEが小数点以下第6位まで。第7位で四捨五入。第8位以降は無視。
FirefoxとChrome はパーセンテージと同じ。
Operaはなぜか全てdegに変換されたが、小数点以下の扱いはパーセンテージと同じっぽい。

IEはこれだけだと調査不足な感じがする……。

Times

animation-delayに各時間単位を指定。

IE 9IE 10FirefoxChromeOpera
s非対応1.551.555561.55555555551.56
ms非対応1.551.555561.55555555550s

Opera以外はパーセンテージと同じ。
Operaはs指定はパーセンテージと同じだがmsがsに変換された。100ms, 10ms指定はそれぞれ0.1s, 0.01sに変換されるのでミリ秒単位が使えないわけではないが、5ms以下のミリ秒は0sに変換される。まとめると0~5msが0sに、6~9msが0.01sとなる。

Firefoxでの注意点

数値をいじっていると、Firefoxは小数点以下の四捨五入ポイントが変わったりすることがあるのに気づきました。
どうやら小数点以下第何位という解釈ではなく、数値の桁数で判断しているように見えます。
下記の表ではフォントサイズをpx指定しましたが、Firefoxはどの単位でも同じようになります。
(他のブラウザはそれぞれの単位を参照)

IE 9IE 10FirefoxChromeOpera
1.5555555555px1.551.551.555561.55555555551.56
10.5555555555px10.5510.5510.555610.555555555510.56
100.5555555555px100.55100.55100.556100.5555555555100.56
1000.5555555555px1000.551000.551000.561000.55555555551000.56
10000.5555555555px10000.5510000.5510000.610000.555555555510000.56
100000.5555555555px100000.55100000.55100001100000.5555555555100000.56
1000000.5555555555px1000000.551000000.5510000001000000.55555555551000000.56

チェックに使用したファイルはこちらです。

CSS単位別小数点以下の扱い

誤りがありましたらご連絡ください。