firefox/Mac&之间的CSS差异火狐浏览器/Windows [英] css difference between firefox/Mac & firefox/Windows

问题描述

我正在与设计师一起设计模板，我们看到了不同的事情.在Mac上的浏览器中，输入字段位于标签旁边，但对于浏览器中的设计人员，输入字段位于标签下方.

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.

我使用eric meyer的CSS重置，所以一切都应该正确.这是一个截图，以说明我的意思(左边是应该的，右边是不应该的)

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?

推荐答案

如果字段大小以 em s给出，则将其更改为 px .

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

em 取决于字体大小，并且字体大小并不是完美的像素(不同的浏览器将其取整，确切的宽度可能取决于字体，尤其是如果字段之间的间隙是空格的话)).

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).

您也可以尝试:

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.

这篇关于firefox/Mac&之间的CSS差异火狐浏览器/Windows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！