スマホの一部の機種で要素にwidthを指定しても その幅で表示されない件

お久しぶりです(小声)
気づいたら先月1記事も更新してないというとんでもない放置っぷりの割に、訪問数がじわじわ増えてることに慄いております、@marronmodeです(;´Д`)
色々試したいこともあるので、今月はブログ更新強化月間にしたいと思います!(宣言)


さて、応募フォームを作成していた時に、スマホの一部の機種で

要素にwidthを指定しても その幅で表示されない現象に悩まされたので、備忘録としてまとめておきます。
フォーム自体はPC用なのですが、スマホで見たときにも最低限レイアウトが整って見えるように、実機で確認していたのですが、テーブルの一部の

要素がひっこんだり・はみ出たり揃わない・・・(上の画像参照)

原因は<input>を<td>の中にインラインで記述していたのが原因でした。

             <tr>
              <th>性別</th>
              <td><input type="radio" name="sex_s" value="男性" checked>男性 
              <input type="radio" name="sex_s" value="女性">女性</td>
            </tr>

<p>や<div>などブロック要素で囲んであげれば、CSSに指定した幅できちんと表示されました!

             <tr>
              <th>性別</th>
              <td><p><input type="radio" name="sex_s" value="男性" checked>男性 
              <input type="radio" name="sex_s" value="女性">女性</p></td>
            </tr>

iPhoneではこのような崩れ方はしてませんでした。
ぐぐっても悩んでる人が見つからなかったので、一部のAndroid機種だけなのかもしれません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です