css - CSS-モバイルSafariとChromeのパスワードフィールドの高さ

Question

style = "height：22px"を両方の要素に直接適用しても、パスワードフィールドの高さがその上のテキストフィールドの高さと異なるという問題があります。

現在のHTML：

  <h2>Username 
    <label>
      <input name="email" type="text" id="email" style="height:22px" />
      </label>
  </h2>
  <h2>Password  
    <label>
      <input name="password" type="password" id="password"style="height:22px"  />
      </label>
  </h2>

現在のCSS：

#logonForm input[type=text], #logonForm input[type=password] { 
    font-size:18px;
    border-radius:8px;
    padding-left:10px;
    height:22px;
    width:364px;
}

これにより、（スタイル属性の有無にかかわらず）次のようにレンダリングされます。

同じ高さでレンダリングするにはどうすればよいですか？なぜこれが発生するのですか？

Answer 1

パディングだけでなく、すべての側に明示的なパディングを追加する必要がある場合があります-左：

#logonForm input[type=text], #logonForm input[type=password] { 
    font-size:18px;
    border-radius:8px;
    padding:0 0 0 10px;
    height:22px;
    width:364px;
}