みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

モバイルサイト<3キャリア>:auでwidth指定が無効化される?

モバイルサイト<3キャリア>:auでwidth指定が無効化される?

3キャリア共通仕様の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でも組める等、お知恵をお貸しください。よろしくお願いいたします。

投稿日時 - 2010-07-23 21:16:48

QNo.6059257

すぐに回答ほしいです

質問者が選んだベストアンサー

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

▼可能性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>

投稿日時 - 2010-07-23 22:55:38

お礼

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

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

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

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

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

投稿日時 - 2010-07-25 02:14:24

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問