[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法

submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。

デモをiPhone4でキャプチャ

Styling Submit Buttons for Mobile Safari
デモページ
キャプチャの元画像:協力(@sparrowSeven

この現象はデスクトップ用のブラウザ(Safari, Firefox)では起きませんでした。また、iPhoneのシミュレーター(iBBDemo2)でも確認できませんでした。iPhone4固有の現象のようです。

原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。

未対応時のスタイル

HTML

HTMLは非常にシンプルです。

CSS

未対応時のスタイルシートです。

対応時のスタイル

テキストのずれや角丸を期待通りにするには「-webkit-appearance: none;」を追加します。HTMLの変更はありません。

CSS

対応時のスタイルシートです。

-webkit-appearanceの参考ページ

ブラウザでの表示

ブラウザでの表示は、未対応・対応時ともに変化はありません。

デモをブラウザでキャプチャ

デモページ

iPhone4での検証にあたって

僕はiPhone4を持ってないため、coliss.comのtwitterアカウントで協力を求めました。
挙手いただいた方をはじめ、検証していただいた方、ありがとうございました。

thx: @sparrowSeven, @tobotoboto, @enst_jp

sponsors

top of page

©2018 coliss