Safariで崩れる！？ floatを使わずdisplay:inline-blockで横並びにする方法

2016年12月10日

コーディング作業で要素を横並びにする際に、display:inline-block;が使われていることがありますが、
結論から言うと、PCページで横幅いっぱいに要素を横並びにする場合は、その方法は使わずfloatで横並びにした方が良いかと思います。
なぜなら、ネット上でよく見かける情報通りに記述すると、safariブラウザで崩れる不具合が起きるからです。
また、その崩れを修正する方法もありますが、letter-spacingでのマイナス値を測って設定する煩わしさもあり、今度はIE7で崩れもおきます。

下記にdisplay:inline-block;を使ってsafariでも崩れない書き方を残しておきますが、この方法は、

・IE7の対応をする必要がない
・横並びにしたい要素の親要素に左右の余白がある（pcページ）
・中央寄せしたい

場合にのみ使用するのが良いかと思います。
ちなみに、スマホだとsafari、androidとも問題なく使用することができるので、スマホページで要素を横並びにして中央揃えしたいという時には便利かと思います！

inline-blockで横並びにする方法（Safariでも崩れなし）

html

<ul class="sample">
<li>サンプル</li>
<li>サンプル</li>
</ul>

</ul>

css

.sample { /* 親要素 */
font-size:0;
letter-spacing: -（調整）px; /* 文字間を詰めて隙間をなくす */
}
.sample li { /* 子要素 */
display: inline-block;
letter-spacing: normal; /* 文字間を元に戻す */
}