输入元素周围的持续边距和1px高度差

Question

我输入元素有问题:

即使在那张照片中他们的CSS也是

margin: 0;
padding: 0;

他们仍然有我无法摆脱的微小余量.我不得不使用-4px的负余量来使按钮保持接近文本字段.

此外,在进行进一步的样式设计时,我最终遇到了Firefox和Chrome之间的问题:提交按钮似乎没有相同的高度.设置一个高度,使提交按钮与Chrome上的输入栏配合在一起,在Firefox上将其打破,反之亦然.似乎没有明显的解决方案.

按钮之间1px差异http://gabrielecirulli.com/p/20110702-170721.png

在图像中,您可以看到Chrome中的位置(右侧)按钮和输入字段完美匹配,在Firefox中,它们的高度差异为1px.

这两个问题(持续保证金和1px差异)是否有解决方案？

---

编辑:我已经修复了第一个问题,这是因为这两个元素在html代码中被换行符分隔开来.第二个问题仍然存在,正如你在这里看到的那样:通过突出显示两个元素的形状,你可以看到在Firefox(左)中按钮比Chrome中的高2px(右)

Answer 1

试试这个:演示小提琴.

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失败,因为它固执地显示正常的按钮式提交输入.