[携帯]複数画像を縦に隙間なく表示させられるか

先日コーディングをしたモバイルサイトの案件で、どうしても複数画像を縦に隙間なく表示させなければならない状況がありまして、その時の検証結果をまとめてみました。

3キャリア(docomo,au,softbank)1ソース対応
対応機種:3G以降
xhtmlで記述

サンプルページ

サンプルページ

QRコード
http://sakaki0214.com/sample/090328/index.xhtml

※シュミレーターやFirefoxのアドオン「FireMobileSimulator」や、直接携帯端末で見てください。

各サンプルの簡単な解説

[1]1画像ごとにbrで改行

<img src="画像" /><br />
<img src="画像" /><br />
<img src="画像" /><br />

[2]改行なし

<img src="画像" />
<img src="画像" />
<img src="画像" />

[3]↑のソース上の改行をなしに

<img src="画像"><img src="画像"><img src="画像">

[4]各画像をdivで囲ってみる

<div><img src="画像" /></div>
<div><img src="画像" /></div>
<div><img src="画像" /></div>

[5]tableの各セル(td)に各画像を入れてみる

<table cellspacing="0" cellpadding="0">
<tr><td><img src="画像" /></td></tr>
<tr><td><img src="画像" /></td></tr>
<tr><td><img src="画像" /></td></tr>
</table> 

検証結果

[1]

docomo:隙間なし
au:隙間あり
softbank:隙間なし

[2]

docomo:隙間あり
au:隙間あり
softbank:隙間なし

[3]

docomo:隙間なし
au:隙間あり
softbank:隙間なし

[4]

docomo:隙間なし
au:隙間あり
softbank:隙間なし

[5]

docomo:隙間あり
au:隙間なし
softbank:隙間なし

結論

3キャリア1ソースで実現することは不可能。
auで隙間なく縦に画像を並べる方法がtableしかないだなんて・・・。
諦めきれずに、この他にも色々検証してみたんです。

margin:0、padding:0、line-height:0、font-size:0、などなど。

どれも効果なし。

もし、どなたか解決方法をご存知でしたらぜひ教えてください・・・

トラックバックURL

コメント

めっちゃ役立ちました!
auで隙間ができてしまい困ってました。
ありがとうございました

困りますよねー。なんとかなればいいんですが。

コメントする


匿名でも本名でもなんでも。


公開されません。


ブログやホームページなどありましたら。


コメントは承認制となっております。公開までしばらくお待ちくださいませ。

サイト内検索
モバイルサイト
これからゆっくり考L:QRコード

このページのトップへ