我有输入元素的问题：
即使在那张照片他们的CSS是
margin: 0; padding: 0;
他们还有那么微不足道的我不能摆脱.我不得不使用-4px的负边距来让按钮保持靠近文本字段.
另外,当进一步设计时,我最终会遇到Firefox和Chrome之间的问题：
提交按钮似乎没有相同的高度.设置一个高度,使提交按钮与Chrome上的输入栏配合,在Firefox上将其打破,反之亦然.似乎没有明显的解决办法.
1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png
在图像中,您可以看到Chrome中的哪个位置(右)按钮和输入字段完美匹配,在Firefox中,它们的高差为1px.
有没有解决这两个问题(持续的余量和1px的差异)？
编辑：我已经修复了第一个问题,这是由于两个元素在HTML代码中被换行分隔的事实引起的.
第二个问题依然存在,如你所见：
通过突出显示两个元素的形状,您可以看到在Firefox(左)中,按钮比Chrome更高2像素(右)
解决方法
尝试这个：
demo fiddle.
HTML：
<span><input type="text" /><input type="submit" /></span>
CSS：
span,input {
margin: 0;
padding: 0;
}
span {
display: inline-block;
border: 1px solid black;
height: 25px;
overflow: hidden;
}
input {
border: none;
height: 100%;
}
input[type="submit"] {
border-left: 1px solid black;
}
在IE8,IE9,Opera 11.50,Safari 5.0.5,FF 5.0,Chrome 12.0中的Win7测试.只有IE7失败,因为它固执地显示一个正常的按钮式提交输入.
