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

Category : CSS

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

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

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

Percentage

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

IE9IE10FirefoxChromeOpera
%1.551.551.555561.55555555551.56

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

Font-relative lengths

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

IE9IE10FirefoxChromeOpera
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

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

IE9IE10FirefoxChromeOpera
vw1.551.55非対応1.5555555555非対応
vh1.551.55非対応1.5555555555非対応
vmin (IE9:vm)1.551.55非対応1.5555555555非対応
vmax非対応非対応非対応非対応非対応

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

Absolute lengths

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

IE9IE10FirefoxChromeOpera
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() に各角度単位を指定。

IE9IE10FirefoxChromeOpera
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 に各時間単位を指定。

IE9IE10FirefoxChromeOpera
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 はどの単位でも同じようになります。
(他のブラウザはそれぞれの単位を参照)

IE9IE10FirefoxChromeOpera
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

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

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

Trackbacks & Pingbacks

Leave a Reply