Persistent margin and 1px height difference around input elements

Question

I\'m having a problem with input elements:

Even though in that picture their

Answer 1

Try this one: demo fiddle.

HTML:

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

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.