Question

check this page out: http://jsbin.com/itufix with IE (page automatically enables IE7 mode).

Here you’ll find examples how inline elements (input and span) are rendered as with display block. All elements margins and padding is set to 0.
If you use Developer tools for IE (IE8-9) you could have noticed that input shows offset: 1.

Can anyone explain what is actually happening and how to fix this?

NOTES

1. Adding float to input fix this, but this is not an option. I need to get this done without float.
2. Input/span and its div parents property hasLayout value is true!
3. Any info related to this bug is welcome.

UPDATE:
Here are more examples of how styles are used: http://jsbin.com/itufix/13. Each field can have description under it, plus the whole div.form-item may float (in case I need more than one field in line)

Answer 1

If you can’t float the input (why?) then you could do this:

*+html input {
    margin-top: -1px;
    margin-bottom: -1px;
}

http://jsbin.com/itufix/5

That’s using a CSS hack so the workaround is only applied in IE7.