ジェイクールの更新テクニック

【Google Chrome】floatをした要素の横幅に0.016px(小数点)が加算される時の対策

※こちらは2015年5月28日の記事です。

数日前より、floatで横並びにしたグローバルナビなどで段落ちが見受けられる様になり、
要素検証をしたところ、何故かwidthに小数点(0.016px)が加算されている様子。

どうやら現状最新バージョンのChromeで「特定の条件でfloatした要素の横幅が0.016px増える」現象が発生しており、「widthを明示していない」「floatした要素内に改行や空白がある」などの条件が重なっている場合に起こる様です。

【対策】

「要素内の改行や空白を消す」、
もしくは「要素にwidthを指定する」、
もしくは「floatした要素の中身のimgにdisplay:blockを指定する」などで解消される様です。

※今回の現象とその対策の効果はGoogle Chromeバージョン 43.0.2357.81 mで確認しています。今後のバージョンアップにより解消されるかもしれませんが、レイアウトが崩れてお困りの場合はひとまず上記をお試しください。