Chromeにて要素のpx値を小数点ありで指定した場合、実際には何pxでレンダリングされるのか？

各ブラウザで、px値の小数点以下の扱いが違うと知ったので調べていたのですが、
Chrome（バージョン：50.0.2661.87 m）で
以下の記事の「widthのパーセント指定の確認ページ」で確認したところ、
不思議な現象が起きました。
widthをパーセント指定する場合の小数点〜CSS

各<li>の幅は「167px」と出ていますが、167px × 3 = 501 となるので、
幅が500pxの<ul>から1pxはみ出る計算になると思います。
しかし、結果を見てみると、「no3」の右側に<ul>の背景色である赤色が見えます。
ということは、
・<ul>の幅が500px以上になった
・<li>の幅が実は167pxではない
などということが考えられると思いますが、
開発者ツールのデバッグで<ul><li>のoffsetWidthの値を見ても、それぞれ「500px」「167px」で相違ありませんでした。

①なぜ<ul>の赤色が見えてしまっているのでしょうか？実際には何pxでレンダリングされているのでしょう？
②実際にレンダリングされている要素の幅を取得するには、どうしたらいいのでしょうか？
（offsetWidthの値を見ればいいという記事を見たのでそれを使っていますが、正しいのでしょうか？）

行動規範の内容に同意します

回答2件

ベストアンサー

chrome ：50.0.2661.102 で再現しました。
開発ツールの elementsタブのcomputedタブで、li は 166.656px と表示されていました。
offsetWidth を取得したら、167 が返ってきました。
bodyの横幅を変えてみたら、赤い背景が見えたり見えなかったりしています。丸め誤差のような。

ためしに ul を 600px にしたら、33.333% で 199.984px になりました。
bodyの横幅を変えてみたら、赤い背景が見えたり見えなかったりしています。丸め誤差のような。

合計が100になるように、33%, 33%, 34% にしたら、
bodyの横幅を変えても、赤い背景が表示されることはなくなりました。
しかし、ためしに ul を555px にしてみたら、33%, 33%, 34% でも赤い背景がでる場面がありました。

各エレメントのpxに小数部が登場してしまうとき、丸めが上に行くか下に行くかによって
赤い背景が出たりでなかったりしてしまうようです。

最後のエレメントに「残り全部」と指定するのがよいような気がしました。
| float: left; width=33% | float: left; width=33% | float: inherit; width: 100% |
とやってみたら、赤い背景は表示されなくなったようです。少なくとも私が使っているブラウザでは。

回答になってますかね?

投稿2016/05/13 12:15