ブラウザによりCSSの小数点の切り上げ方が異なる

CSSでの小数点の扱いはどうなるか?

CSSでの小数点の扱いは小数点第一位で四捨五入され0.4なら0、0.5なら1のようになると思っていたのだがどうやら違うようだ。

最新のChromeの場合

0.98までが0
0.99から1になる。
ちなみにSafariもこれと同じ結果になる。






hoge

最新のFirefoxの場合

0.49166までが0
0.49167から1になる。






hoge

最新のIEの場合

小数点は切り下げられて必ず0(よって0.9999でも0)






hoge

JavaScriptやPHPなどでmarginやpaddingなどが書き出されることがよくあるが、小数点の処理(切り上げ、切り下げ、四捨五入)などをしていないとブラウザごとに見た目の違いが出てしまうため気をつけたい。

カテゴリーcss