firefox/Mac & css 的区别火狐/视窗 [英] 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 reset，所以一切都应该是正确的.这是一个截图来说明我的意思(左边是应该的，右边是不应该的)

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 中给出，则将它们更改为 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 的区别火狐/视窗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！