スマホサイトでtd/th要素へのposition:relativeはダメ！

iOS4.x系やAndroid2.x系のブラウザだとtd/th要素に指定したposition:relativeが無視されます。

また、td/th要素以外にもdisplay:table-cellを指定した要素へのposition:relativeの指定は無視されます。

セルの内側の要素をabsoluteを使って自由配置したい場合は、内側にdivを一個かましてそいつにposition:relativeを指定するのがよろしいかと思います。

<table>
	<tr>
		<td>
			<div>cell1</div>
		</td>
		<td>
			<div>cell2</div>
		</td>
	</tr>
	<tr>
		<td>
			<div>cell3</div>
		</td>
		<td>
			<div>cell4</div>
		</td>
	</tr>
</table>
th,td{
	vertical-align: top;
}
th>div,td>div{
	height: 100%;
	position:relative;
}

関連エントリー

CSS3でセレクトボックスをカスタマイズ
@keyframesとAndroid
background-sizeとグラデーション
Androidと-webkit-tap-highlight-color
Androidで-webkit-box-reflectによる鏡面効果を指定する方法

スポンサードリンク

«Compassでスプライト画象を高速に書き出す方法 | メイン | CSS3でのposition:relative»