モバイル端web開発の穴---input内の文字と同業者の文字の位置合わせの問題

1141 ワード

<p><input type="text" placeholder="           ">   p>

1、chromeで設定
p{
   display: flex;justify-content: flex-start;align-items: center
}

位置合わせの問題をうまく解決することができて、この時inputボックスの中の文字は垂直に中央に位置します
iosでは、input内の文字の下に、トップボックスが同業者の文字と揃えられ、input vertical-align:topを設定します.安卓では、input内の文字を上にして、input vertical-align:text-bottomを設定します.効果良好(複数の携帯電話で検証済み)
2、inputのline-heightを設定する