firefox / Mac＆amp;火狐/视窗

Question

我正在与设计师合作制作模板，我们会看到不同的东西。在Mac上的浏览器中，输入字段位于标签旁边，但对于浏览器中的设计人员，输入字段位于标签下。

我使用eric meyer的css重置，所以一切都应该是正确的。这是一个截图来说明我的意思（左边是应该是什么，右边是什么，不应该是）

有谁知道如何解决这个问题？

Answer 1

如果字段大小在em中给出，则将其更改为px。

em取决于字体大小，字体大小不是像素完美的（不同的浏览器以不同方式对其进行舍入，确切的宽度可能取决于字体，特别是如果字段之间的间隙是空格）。 / p>

在容器中留出一些空间（只需使包含元素的像素比它必须宽一些）。

您也可以尝试：

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

这使得表单元素的大小更加一致。

Answer 2

我知道很久以前就会问这个问题，但我今天遇到了类似的问题，并认为我分享了对我有用的解决方案。

在输入字段上放置font-size和width，这可能会有所帮助，因为font-size的默认值似乎（或可能）在windows和mac中有所不同。通过这种方式，您可以继续使用我个人更喜欢使用的em。

Answer 3

如果您使用的是php，或者查看如何使用您选择的服务器端编程语言获取用户代理，您可以尝试类似$ _SERVER [＆＃39; HTTP_USER_AGENT＆＃39;]的内容。根据用户代理，您可以将条件粘贴到html文档的head部分以打印css。确保它是订单中的最后一个，以便您可以覆盖以前编写的CSS。这只是一个选择。如果您的设计很复杂，这很有用。