質問: 501 となるので、 幅が500pxのから1pxはみ出る計算になると思います。 しかし、結果を見てみると、「no3」の右側にの背景色である赤色が見えます。 ということは、 ・の幅が500px以上になった ・の幅が実は167pxではない などということが考えられると思いますが、 開発者ツールのデバッグでのoffsetWidthの値を見ても、それぞれ「500px」「167px」で相違ありませんでした。 1なぜの赤色が見えてしまっているのでしょうか?実際には何pxでレンダリングされているのでしょう? 2実際にレンダリングされている要素の幅を取得するには、どうしたらいいのでしょうか? (offsetWidthの値を見ればいいという記事を見たのでそれを使っていますが、正しいのでしょうか?)
回答: 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% | とやってみたら、赤い背景は表示されなくなったようです。少なくとも私が使っているブラウザでは。 回答になってますかね?