html - HTML 文本和密码输入字段的大小不同 Internet Explorer

Question

我正在为我的登录表单使用此表单设置：

<tr>
     <td class="label"> Username:</td>
     <td> <input id="id_username" type="text" name="username" maxlength="30" /></td>
</tr>
<tr>
     <td class="label"> Password:</td>
     <td> <input a="text" type="password" name="password" id="id_password" /></td>
</tr>

使用 firefox 时，两个输入框的大小相同。但是，当我在 IE 9 上时，密码字段更小。

摆脱这种行为的最佳方法是什么？

Answer 1

使用 CSS 将固定width值应用于元素，例如：

.fixed-input {
    width: 150px;
}
....
<input class="fixed-input" id="id_username" type="text" name="username" maxlength="30" />

Answer 2

我遇到了同样的问题。我添加了宽度样式，但它们看起来仍然不同。

事实证明，文本和密码输入的填充和边框颜色也不相同，这是造成差异的原因。

确保为密码和文本输入设置以下样式属性：

width: 200px;
font-family: sans-serif;
font-size: 15px;
padding: 3px;
border: 1px solid black;

Answer 3

最好的方法是为这些元素定义样式并设置适当的宽度。maxlength 属性可能会增加用户字段的大小。