FireFoxでinline-blockがカラム落ちする

inline-blockとletter-spacingを同時指定すると崩れる

たとえば下図のようなレイアウトを実装すると想定します。

リストを横並びにした、シンプルなレイアウトです。

これをinline-blockを用いて横並びにすると、なぜかFireFoxだけカラム落ちしてしまいました。

実はこれ、inline-block間の隙間を削除するためにlette-spacingで調整をしています。

HTMLは下記の通りです。

<ul class="menu">
    <li class="menu__item">Nav Lorem</li>
    <li class="menu__item">Nav Lorem</li>
    <li class="menu__item">Nav Lorem</li>
    <li class="menu__item">Nav Lorem</li>
</ul>

そして、CSSは下記の通りです。

.menu{
    letter-spacing: -0.4em;
}
  .menu__item{
      display: inline-block;
      letter-spacing: normal;
  }

inline-blockを横並びにすると、改行コードが原因で存在しないはずの隙間が生まれてしまいます。

そのため、letter-spacingを利用して要素同士を隙間なく接するようにするテクニックが存在します。

ところがinline-blockのみの指定では崩れず、どうやらletter-spacingと併用するとこのようなカラム落ちが発生してしまいます。

ブラウザによってinline-blockの実装方法が違うという説もありますが、実際のところ明確な理由ははっきりしていないそうです。

そこで用いられるのが、word-spacingというプロパティです。

単語の間隔を指定するためのプロパティなのですが、letter-spacingと同時に指定することで、崩れを防ぐことができるようです。

指定するのは0.1emでなくてもよいです。とりあえず正の値を指定すれば崩れることがなくなるようです。

.menu{
    letter-spacing: -0.4em;
    word-spacing: 0.1em;
}
  .menu__item{
      display: inline-block;
      letter-spacing: normal;
  }

もし同時に指定することに抵抗があれば、FireFoxのみ有効なCSSハックを用いて指定すればよいでしょう。

.menu{
    letter-spacing: -0.4em;
}
  .menu__item{
      display: inline-block;
      letter-spacing: normal;
  }
@-moz-document url-prefix() {
  .menu{
      word-spacing: 0.1em;
  }
}