负左边缘问题和神秘的4px差异

Question

我抓了很长时间,终于决定寻求帮助.实际上我有一个带有两个输入(字段+按钮)的简单表单,我想在将表单包装到文本字段+填充的正确宽度时将按钮放在字段上.

我在按钮上使用margin-left:-31px,设置宽度为27px.

你可以尝试一下http://jsfiddle.net/UfK6K/ ,它似乎

但是当我设置margin-left:-32px时会破坏布局. http://jsfiddle.net/UfK6K/1/并出现

现在,如果我将按钮的宽度更改为任何数字,并且我保持边距保持在负4px差异内它可以工作但是当它增加时像-32px一样它会中断.

我想了解4px的差异在哪里发挥作用？当然,我怎样才能将按钮位移到文本字段上？

*除了Opera之外,所有浏览器都会中断.

Answer 1

那么它是一个非常棘手的问题,从4px来自哪里.我会尽力回答.

当任何元素设置显示为内联块时,则发现4px位于此元素的右侧.实际上它的大小是"白色空间",是的,它实际上是一个白色空间.

您可以将其视为内联块元素由空格分隔,并且通常需要4px,因为在Opera中它需要更多(不确定最新版本 - 因为不同的字体在不同的浏览器中呈现具有不同宽度的空白只有在浏览器和字体大小上呈现一致的空白宽度的字体才是Courier New.它是一个固定宽度的字体,它的空白是0.63em宽.).但你明白了吗？

现在有各种各样的工作,如float:left或甚至设置父元素的负4px字母间距,其中包含内联阻塞元素.

你也可以试试font-size:0;

在你的特定情况下的位置:绝对; 似乎是最好的选择.