Chromeでfloatした要素の幅になぜか0.016pxが追加され、表示が崩れるということがありました。

今まで崩れていなかったはずなのになぜ？？？
と思って調べたらChromeのバージョン（バージョン 43）が原因のようです。

Chromeで要素を検証したら、floatしている要素に0.016pxが追加されてました。

正常に並んでいたのがこのような感じです。

要素が下に落ちて表示されたのがこれ。

スタイルの指定の仕方やHTMLの記述によって、このように0.016pxが付いてしまいます。
また、フォントやフォントサイズの指定が原因の可能性もあるようです。

ちなみに私が確認したChromeのバージョンはこれです。

Chromeのバージョンが上れば改善されると思いますが、このようになった時の対処方法を記載します。

Chromeでfloatした要素に0.016pxが追加される時の対処方法

下記、サンプルページです。
Chromeのバージョンが「バージョン 43」だと要素に0.016pxが追加されます。
他のブラウザでは正常に表示されます。

Chromeで要素に0.016pxが追加された時のサンプルページ

原因としては下記の内容が当てはまります。

• 要素に「width」を指定していない
• 要素内に改行や空白が入っている
• フォントの指定

もし0.016pxが追加される場合、下記の方法で対処することができました。

• floatした要素に「width」を指定する
• floatした要素内に「改行や空白」を含めない
• floatした要素内のimgに「display: block;」を指定する

この方法を試せば、0.016pxが追加されずに正常に表示することができると思います。
また、フォントサイズを変更しただけでも対応できる場合がありました。

まとめ

今回はChromeでfloatした要素に0.016pxが追加される時の対処方法を紹介しました。
Chromeのバージョンアップにより、改善される可能性がありますがメモとして残しておきます。

上記のような現象が起きた場合は、試してみてください。