仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

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

公開日:

Chrome

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

 

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

 

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

 

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

 

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

Chrome_float_test_1

 

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

Chrome_float_test_2

 

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

 

 

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

Chrome_float_test_3

 

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のバージョンアップにより、改善される可能性がありますがメモとして残しておきます。

 

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

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00