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

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

Answer 3

我有同样的问题。我添加了宽度样式，他们仍然看起来不同。

原来，文本和密码输入的填充和边框颜色也不相同，这导致了差异。

确保您设置密码和文本输入框下面的样式属性：

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