...">
Geek asks and answers

HTML text and password input fields have a differential internet explorer

I use this form setting for my login form:

<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>

when using firefox, both input fields are the same size. However, when I am in IE 9, the password field is smaller.

What is the best way to get rid of this behavior?

+5
source share
3 answers

Use CSS to apply a fixed value widthto elements, for example:

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

I had the same problem. I added a width style and they still looked different.

it turned out that the color of the gasket and the borders also did not match for the text and password, and this caused a difference.

make sure that you set the following style attributes for both password and text input:

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

. , maxlength .

+1
source

More articles:


All Articles