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;