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屬性可能會增加用戶字段的大小。