Android2.3でfont-size: 0;が効かない

display: inline-block;とfont-size: 0;で横並びにする実装をしていたのですが、Android2.3でレイアウトが崩れてしまっていたので、原因を調べてみました。

サンプルコード

width: 50%;で2列に並べてみます。

HTML

<ul class="list">
	<li class="list__item">リスト1</li>
	<li class="list__item">リスト2</li>
	<li class="list__item">リスト3</li>
	<li class="list__item">リスト4</li>
	<li class="list__item">リスト5</li>
</ul>

CSS

.list {
	width: 320px;
	margin: 0 auto;
	font-size: 0;
}
.list__item {
	display: inline-block;
	width: 50%;
	font-size: 14px;
	text-align: center;
}

display: inline-block;で指定すると要素間に隙間ができてしまうため、親要素にfont-size: 0;を指定して隙間を消すようにしています。
他のブラウザでは問題なかったのですが、Android2.3で確認すると、1列の縦並びになっていました。
Android2.3で不具合が出る場合のデモページ
　

widthを小さくして、背景色を付けてレイアウトが崩れないか試してみました。

CSS

.list {
	width: 320px;
	margin: 0 auto;
	font-size: 0;
}
.list__item {
	display: inline-block;
	width: 45%;
	font-size: 14px;
	text-align: center;
	background: #ccc;
}

2列で表示されるようになりましたが、要素間に隙間ができてしまっていました。
widthを小さくするデモページ
　

font-size: 0;が効いていないようなので、子要素に指定しているfont-size: 14px;を削除して挙動を試してみました。

CSS

.list {
	width: 320px;
	margin: 0 auto;
	font-size: 0;
}
.list__item {
	display: inline-block;
	width: 45%;
	text-align: center;
	background: #ccc;
}

font-sizeが0になったため、他のブラウザでは要素が表示されなくなりましたが、Android2.3ではフォントが小さくなるのみでした。
font-size: 0;のデモページ
　

挙動確認のため、font-size: 1px;でも試してみます。

CSS

.list {
	width: 320px;
	margin: 0 auto;
	font-size: 0;
}
.list__item {
	display: inline-block;
	width: 45%;
	font-size: 1px;
	text-align: center;
	background: #ccc;
}

Android2.3ではフォントサイズの変化はなく、他のブラウザでは最小のフォントサイズで表示されるようでした。
font-size: 1px;のデモページ
　

結論としては、基本的にはfont-size: 0の時はテキストが表示されなくなるのですが、Android2.3の場合は最小のフォントサイズで表示されてしまうようです。

今回の場合、HTMLで要素間のインデントなどを削除する方法で対応しました。

HTML

<ul class="list">
	<li class="list__item">リスト1</li><li class="list__item">リスト2</li><li class="list__item">リスト3</li><li class="list__item">リスト4</li><li class="list__item">リスト5</li>
</ul>

インデント削除のデモページ
　

【参考サイト】

• ブラウザで表示できる最小フォントサイズ(10px)以下の文字を表示する – knowledge base