输入框周围的持久边距和1像素高度差异。

Question

我遇到了一个输入元素的问题：

尽管在那张图片中他们的CSS是

margin: 0;
padding: 0;

他们仍然有一个我无法摆脱的微小间距。我不得不使用负边距-4px来使按钮紧贴文本字段。

另外，在进一步进行样式设置时，我遇到了Firefox和Chrome之间的问题： 提交按钮似乎高度不同。在Chrome上设置与输入栏相配套的提交按钮高度会导致在Firefox上出现问题，反之亦然。看起来没有明显的解决方案。

提交按钮之间1像素的差异http://gabrielecirulli.com/p/20110702-170721.png

在图像中，您可以看到在Chrome（右侧）中按钮和输入字段完美地配合，在Firefox中它们将具有1像素的高度差异。

这两个问题（持久的边距和1像素差异）是否有解决方案？

---

编辑: 我已经解决了第一个问题，这是由于html代码中两个元素之间有换行符引起的。 然而，第二个问题仍然存在，如下所示： 通过突出显示这两个元素的形状，可以看到在Firefox（左）中，按钮比Chrome（右）高2像素

- kettlepot

---

请检查字号、高度、上边框、下边框的 CSS 属性。 - SAIF

Answer 1

请试用这个： 演示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;
}

在Win7中测试过，在IE8、IE9、Opera 11.50、Safari 5.0.5、FF 5.0和Chrome 12.0中都能正常运行。唯独IE7无法正常显示提交按钮。

- NGLN

Answer 2

看起来你的CSS在某个地方干扰了输入布局。

正如你在这里所看到的http://jsfiddle.net/F3hfD/1/，你所要求的是完全可行的。

- Ben

---

第二个问题也出现在您的fiddle中：http://gabrielecirulli.com/p/20110702-172143.png（左边是Firefox，右边是Chrome） - kettlepot

@Gabriele，您可以通过设置固定高度来解决此问题。按钮很棘手，因为它们不仅取决于您所使用的浏览器，还取决于浏览器运行的操作系统。请查看更新后的fiddle。 - Ben

我也试过了。当你这样做时，两个浏览器之间会出现另一个问题：http://gabrielecirulli.com/p/20110702-173514.png - kettlepot

要解决这个问题：http://www.gabrielecirulli.com/p/20110702-173514.png（我在Firefox中看到了这个错误），您应该为输入元素添加'vertical-align: top;'（也许还有按钮）。 - Vladimir

Answer 3

针对您的第二个问题，请参见如何在Firefox 4+中重置默认按钮样式

- Boris Zbarsky

Answer 4

关于一个类似的问题，当我使用图像作为 type="submit" 的按钮时，它与相邻的输入框高度不完全相同，我只需将以下代码添加到这两个输入框的容器中：

padding-bottom:1px;

- sledgeweight

Answer 5

我在输入框旁边的一个 span 中使用了 glyphicon，它会插入 top:1px。 所以我在 span 上设置了 top:0px，问题得到解决。 但是这个线程的实际答案完全取决于具体问题，用户需要更好地理解元素和 CSS 才能解决它。

- Ved Prakash