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

Question

我遇到输入元素问题：

即使在那张照片中，他们的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中的高2px（右）

Answer 1

试试这个：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失败，因为它顽固地显示了一个类似按钮的正常提交输入。

Answer 2

在我看来，您的CSS在输入布局的某处干扰。

正如你在这里看到的http://jsfiddle.net/F3hfD/1/你所要求的是没有任何问题的。

Answer 3

关于第二个问题，请参阅How to reset default button style in Firefox 4 +

Answer 4

对于类似的问题，我将图像用作按钮类型=“提交”，并且它与邻近输入的高度不完全相同，我只是将其添加到两个所述输入的容器中： / p>

padding-bottom:1px;

Answer 5

我在输入旁边的一个范围内有一个glyphicon，它插入顶部：1px。 所以我设置顶部：跨度为0px，问题得到解决。 但是线程的实际答案完全是特定于问题的，用户需要更好地理解元素和css来修复它。