chromeのバグによりfloatしたナビゲーションのレイアウトくずれ問題

昨日まで正常だったヘッターのナビゲーションが突然カラム落ち。。。
どうやらchromeバージョンアップによるバグのようです。

▼不具合がおきるバージョン
Ver 43.0.2357.65 以降
(ちなみに、昨日までの不具合なしVer 42.0.2311.152 以下)


開発ツールでみると、画像with136pxに対してliは136.016px
なぜか?0.016px増量されてます。。

どういう条件でカラム落ちするのか?

  1. floatした要素(li)のwith設定がない。
  2. floatした要素<li>から</li>までの間にスペースや改行がある(長いとつい改行しちゃいますよね。。)
  3. floatした要素(li)のfont-sizeが4の倍数以外に設定されている。(親要素からの継承により13pxとか15pxなどに設定されているもの)

解決方法

純粋に1〜3のどれかを解決させればOKですが。。

  1. liにwith設定
    → 画像サイズがバラバラだとめんどいですよね。。
  2. スペースや改行をとる
    → スライドダウン設定をしていたりすると、コードが長くなり読みにくくなるし、そうも言ってられませんよね。。
  3. liのfont-sizeを0もしくは10以上で4の倍数にする(16px、20pxなど)
    → テキストが無いのにあえて指定するのもなぁ。。
と、思うこだわりコーダの方、
liの中にあるimgもしくはaに「display: block;」で解決します。

liに「display: table;」でもOKですがcss3ですので、ie7非対応です。
chrome問題なのでieで無視されても問題無いじゃん。ですが、、

何となくすっきりしないので、私はaに「display: block;」がオススメです。
リンク範囲もliと同範囲で正確になりますしね。