Input Fields Rendered Very Differently In Different Browsers

Okay, so I am in the process of designing a website which has a login form at the top-right corner of a webpage. I set the size attribute of its input fields and I am getting some

Solution 1:

The size attribute sets the number of characters that the field will display (in the case of text and password fields). Different browsers use different default fonts, font sizes, and ppi measures, meaning that you get massively different sized (in pixels) fields.

Also, as the spec says, this is merely the "initial" width of the control, and the browser is free to resize the control if it decides it needs to in the course of reflowing the entire page.

To even have a hope of making this field close to the same (pixel) size on different browsers, you'll have to style it with CSS. That being said, there is probably a good reason that each of these are different sizes - mostly having to do with default fonts - and if you pixel-restrict the size of the field that means some browsers will display more actual text than others.