输入元素周围的持久边距和1px高度差 [英] Persistent margin and 1px height difference around input elements

问题描述

我对输入元素有问题：

即使在该图片中，他们的CSS是

Even though in that picture their css is

margin: 0;
padding: 0;

他们还有那些微小的边缘，我无法摆脱。我不得不使用-4px的负边距获得按钮靠近文本字段。

They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.

此外，当做进一步的样式我结束了一个问题， Firefox和Chrome：
提交按钮似乎不具有相同的高度。设置使提交按钮与Chrome上的输入栏相配合的高度会在Firefox上中断，反之亦然。似乎没有明显的解决方案。

Also, when doing further styling I end up with a problem between Firefox and Chrome: submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.

在图片中，您可以看到在Chrome中右键（右）的按钮和输入字段完美匹配，在Firefox中，它们的高度差为1px 。

In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.

这两个问题有没有解决方案（持久余额和1px差异）？

Is there a solution to these 2 problems (the persistent margin and the 1px difference)?

EDIT：我修复了第一个问题，这是由于两个元素被html代码中的换行符分隔开的事实。
第二个问题仍然存在，你可以看到这里：
通过突出显示两个元素的形状，你可以看到在Firefox（左）的按钮比Chrome高2px（右）

I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code. The second problem persists, though, as you can see here: by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)

推荐答案

尝试这个：演示小提琴。

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;
}

$ b < FF 5.0，Chrome 12.0。只有IE7失败，因为它固执地显示一个正常的按钮状提交输入。

Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.

这篇关于输入元素周围的持久边距和1px高度差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！