モバイルサイト＜3キャリア＞：auでwidth指定が無効化される？

質問

モバイルサイト＜3キャリア＞：auでwidth指定が無効化される？

３キャリア共通仕様のHTMLサイトを作成しています。cssはインラインで使用しています。

あ行　あ　い　う　え　お
か行　か　き　く　け　こ...

のような「あいうえお表」を挿入したいのですが、タイトルのとおりauで表示が崩れます。
実現したい仕様は添付画像の【docomo,Softbank】のような形で、この2キャリアでは問題なく表示されています。
が、【au】で見ますとそれぞれの要素のwidth指定が無視され、100%表示されてしまっているようです。
該当部分のソースは、以下のとおりです。

<div style="background-color:#FFF; padding:5px; margin:0;">
<div style="background-color:#FFF; padding:5px; margin:0; width:10px; height:15px; display:inline;">あ行</div>
<div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><a href="list_a.html"><font color="#FF0066">あ</font></a></div>
<div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">い</font></div>
<div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">う</font></div>
<div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">え</font></div>
<div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">お</font></div>
</div><!--a end-->

思いつくままにスタイルを追加したので、その中に両立しないものがあるのかなと思うのですが、なにぶんまだ不勉強で・・・
tableで組み直すことも考えたのですが、それぞれのboxをborderで囲みたいのと間隔を空けたいため、ソースが今以上に膨大になってしまう気がして踏ん切りがつきません。
ここを直せばいい、tableでも組める等、お知恵をお貸しください。よろしくお願いいたします。

回答No.1

kuzumiHK · ベストアンサー

モバイルサイトの確認環境がないので、あくまで可能性ですが、
こんな感じでいかがでしょうか。

▼可能性1　spanにしてみる

<div style="background-color:#FFF; padding:5px; margin:0;">
<span style="background-color:#FFF; padding:5px; margin:0; width:10px; height:15px;">あ行</span>
<span style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px;"><a href="list_a.html"><font color="#FF0066">あ</font></a></span>
<span style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px;"><font color="#FF0066">い</font></span>
<span style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px;"><font color="#FF0066">う</font></span>
</div>

▼可能性2 tableにしてみる

<table style="border-collapse:separate;border-spacing:3px;">
<tr>
<th style="background-color:#FFF; padding:5px; width:36px; height:15px; font-weight:normal;">あ行</th>
<td style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; color:#f06;"><a href="list_a.html" style="color:#f06;">あ</a></td>
<td style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; color:#f06;">い</td>
<td style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; color:#f06;">う</td>
</tr>
</table>

▼可能性3 listにしてみる

<ul style="list-style:none; padding:0; margin:0;">
<li style="background-color:#FFF; padding:4px; width:36px; height:15px; font-weight:normal; float:left;">あ行</li>
<li style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:4px; margin-right:3px; float:left;"><a href="list_a.html" style="color:#f06;">あ</a></li>
<li style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:4px; margin-right:3px; float:left; color:#f06;">い</li>
<li style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:4px; margin-right:3px; float:left; color:#f06;">う</li>
</ul>

お礼

早速のご回答ありがとうございます！
それぞれ試してみたところ、

▼可能性1　spanにしてみる
ばっちりでした！

▼可能性2 tableにしてみる
少し調整すれば使えそうです。

▼可能性3 listにしてみる
auでの症状は変化なしでした。

今回は１のspanを使わせていただきます。tableも研究してみます。
ありがとうございました！