firefox/Mac 和 firefox/Windows 之间的 css 区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4027755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css difference between firefox/Mac & firefox/Windows
提问by Christophe
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.
我正在与设计师一起制作模板，我们看到了不同的东西。在我的 mac 浏览器中，输入字段位于标签旁边，但对于浏览器中的设计者而言，输入字段位于标签下方。
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)
我使用 eric meyer 的 css reset 所以一切都应该是正确的。这是一个截图来说明我的意思（左边是它应该是什么，右边是它不应该是什么）
Does anyone know how this could be fixed?
有谁知道如何解决这个问题？
回答by Kornel
If field sizes are given in ems, then change them to px.
如果字段大小以ems给出，则将它们更改为px。
emis 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).
em取决于字体大小，并且字体大小不是像素完美的（不同的浏览器对其进行不同的处理，确切的宽度可能取决于字体，特别是如果字段之间的间隙是空格）。
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.
这使得表单元素的大小更加一致。
回答by Miia Klingstedt
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-sizeand widthon the input field, this might help as it seems the default values for font-sizeis (or can be) different in windows and mac. In this way you can continue to use ems, which I personally prefer to use.
在输入字段上放置一个font-size和width，这可能会有所帮助，因为font-sizeWindows 和 mac 中的默认值似乎（或可能）不同。这样就可以继续使用ems了，我个人比较喜欢用。
回答by Safwan Bakais
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.
如果您使用的是 php，您可以尝试诸如 $_SERVER['HTTP_USER_AGENT'] 之类的东西，或者检查如何使用您选择的服务器端编程语言获取用户代理。基于用户代理，然后您可以将条件粘贴在 html 文档的 head 部分以打印 css。确保它是顺序中的最后一个，以便您可以覆盖之前编写的 css。这只是一种选择。如果您有复杂的设计，这很有用。
