読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

chromeでfloatした要素のwidthが何故か0.016px増える

【2015/07/22追記】
現時点の最新版(ver 44.0.2403.89)で確認したところ、表題の問題は解消されておりました。
まだこの問題が確認される場合はChromeが最新版になっていない可能性がありますので、一度ご確認ください。

現時点でのchromeの最新版(ver 43.0.2357.81)から起きているようです。

グローバルナビ等で画像をfloatで横並びにした時、
以下の条件が組み合わさると要素のwidthが0.016px増えてしまうようです。

  • floatした要素にwidthが設定されていない
  • floatした要素の最後に空白や改行が入っている
  • floatした要素のfont-sizeが4の倍数pxになっている

デモページを用意しましたでの見てもらうのが一番早いかと思います。
ページのソースを確認してもらうと、どういうことかわかるかと...!

修正方法としましては、floatした要素にwidthを明示的に指定してあげるだけで良さそうです。
あとはChromeが修正してくれるのを待つか...ですかね。

取り急ぎ以上です。

【2015/05/28追記】
はてブid:umai_bowさんより「中身のimgをdisplay: blockにするとなおる」と情報を頂きました。
試してみたところ、たしかにこの方法でも直るみたいです。ありがとうございます。

デモページにimg要素をdisplay: block;にしてみた結果も掲載しました。
併せてご確認ください。