恐らく､auの古めの機種でしか発生しないとは思うのですがたまたま遭遇してしまったため書き残しておきます｡ というか､今までこんな現象知らなかったので...今まで私が制作したｻｲﾄはことごとく2g(ry

...｡

xhtml､htmlどちらでも同じ現象が発生します｡

<画像：一般的なでの見え方>

他のｷｬﾘｱで見るとなんの問題もない普通のﾌﾟﾙﾀﾞｳﾝなんですが｡

auの古めな機種(A5511T､W41CAで検証)で見ると､

<画像：au(古い端末)での見え方>

という感じで2行になります｡

ちなみに､auの最近の端末で見るとﾌﾟﾙﾀﾞｳﾝの部分だけ他よりもﾌｫﾝﾄが大きく見えてしまいます｡

<画像：一般的なでの見え方>

ｻﾝﾌﾟﾙﾍﾟｰｼﾞ
<画像：QRｺｰﾄﾞ>
→ｻﾝﾌﾟﾙﾍﾟｰｼﾞを見る

原因は?

selectの外側で小さめの文字ｻｲｽﾞを指定すると､selectﾎﾞｯｸｽの中身のﾃｷｽﾄはﾃﾞﾌｫﾙﾄのｻｲｽﾞのままだけど､ﾎﾞｯｸｽのみが小さめの文字ｻｲｽﾞにあわせて小さくなります｡

要するに､｢中身は大きいままなのに外側のﾎﾞｯｸｽは小さくなってしまう｣ということです｡

auの最近の機種で確認すると､ﾌﾟﾙﾀﾞｳﾝの選択肢の部分だけ他よりちょっと大きく見えます｡古い端末のように2行になってしまうことはないんですが､文字ｻｲｽﾞ指定がselectには効いていないようです｡

ﾌｫﾝﾄを1とかx-smallといった小さいｻｲｽﾞをﾍﾟｰｼﾞ全体に指定している場合は､
･auの古い端末でﾌﾟﾙﾀﾞｳﾝ内のﾃｷｽﾄが2行になってしまう
･auの最近の端末でﾌﾟﾙﾀﾞｳﾝ内のﾃｷｽﾄが他より大きくなってしまう
という現象を防ぐため､optionの内側で文字ｻｲｽﾞの指定をしてあげるとよいです(面倒ですけどね)｡

今回はauだけ調整すればよいので､内部ｽﾀｲﾙｼｰﾄで記述しています(外部でももちろんOKです)｡

<style type="text/css">
<![CDATA[
.fontS {font-size:x-small;}
]]>
</style>
･
･
･
<select name="xx">
<option value="1"><span class="fontS">20歳〜40歳</span></option>
<option value="2"><span class="fontS">40歳〜60歳</span></option>
<option value="3"><span class="fontS">60歳〜80歳</span></option>
</select>

htmlの場合はoptionの内側にfont size="数字"を指定する必要があります｡

<select name="xx">
<option value="1"><font size="1">20歳〜40歳</font></option>
<option value="2"><font size="1">40歳〜60歳</font></option>
<option value="3"><font size="1">60歳〜80歳</font></option>
</select>

ｻﾝﾌﾟﾙﾍﾟｰｼﾞ
<画像：QRｺｰﾄﾞ>
→ｻﾝﾌﾟﾙﾍﾟｰｼﾞを見る

tableの各ｾﾙの内側で文字ｻｲｽﾞを指定しなおすのと似たような感覚ですね｡

ついでにdocomo､softbankの挙動も確認してみる

docomoとsoftbankはoptionﾀｸﾞの内側の文字ｻｲｽﾞ指定が効かないです｡

docomoの場合は､selectﾀｸﾞの外側の文字ｻｲｽﾞがそのままﾌﾟﾙﾀﾞｳﾝ内の文字ｻｲｽﾞに反映されているようですが､softbankの場合はどの文字ｻｲｽﾞ指定も影響しない...どう文字ｻｲｽﾞを変更してもﾌﾟﾙﾀﾞｳﾝ内の文字ｻｲｽﾞを変更することができませんでした｡

混乱してきたのでまとめると?

docomo
...selectﾀｸﾞの外側の文字ｻｲｽﾞがﾌﾟﾙﾀﾞｳﾝ内(optionﾀｸﾞ)の文字ｻｲｽﾞに影響

au(古め)
...optionﾀｸﾞの内側に文字ｻｲｽﾞ指定をしないと改行される恐れあり(ﾍﾟｰｼﾞ全体の文字ｻｲｽﾞが小さい場合)
au(新しめ)
...optionﾀｸﾞの内側の文字ｻｲｽﾞ指定が有効

softbank

[ﾍﾟｰｼﾞ移動: 1 2]