CSS- Mobile 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;
}

这呈现(有或没有 style 属性)为

如何使它呈现相同的高度，为什么会出现这种情况？

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;
}