css difference between firefox/Mac & firefox/Windows

Question

I'm working on a template with a designer and we see different things. In my browser on mac the input field are next to the labels but for the designer in his browser the input fields are under the labels.

I use eric meyer's css reset so everything should be correct. Here's a screenshot to illustrate what I mean (left is what it should be and on the right what it shouldn't be)

Does anyone know how this could be fixed?

Answer 1

If field sizes are given in ems, then change them to px.

em is dependent on font-size, and font sizes aren't pixel-perfect (different browsers round it differently, exact width may depend on font, especially if that gap between fields is a space).

Leave some room in the container (just make containing element few pixels wider than it has to be).

You may also try:

input {
 box-sizing: border-box; 
 -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}   

Which makes sizes of form elements a little bit more consistent.

Answer 2

I know this question is asked a long time ago but I was having a similar problem today and thought I share the solution that worked for me.

Put a font-size and width on the input field, this might help as it seems the default values for font-size is (or can be) different in windows and mac. In this way you can continue to use ems, which I personally prefer to use.