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属性可能会增加用户字段的大小。