问题
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?
回答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.
回答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.
回答3:
You could try something like $_SERVER['HTTP_USER_AGENT'] if you are using php or check how to get the user agent in your chosen server side programming language. Based on the user agent, you can then stick the condition in the head section of the html document to print the css. Make sure it is the last in the order so that you can override your previously written css. This is just one option. This is useful if you have complex design.
来源：https://stackoverflow.com/questions/4027755/css-difference-between-firefox-mac-firefox-windows