Eliminate the gap between the up and down sides of the ie6 7 input box and the container.

Eliminate the gap between the up and down sides of the ie6 7 input box and the container.

This bug is common.

<Div id = "wrap"> <input type = "text"/> </div>

* {Margin: 0; padding: 0;} input {height: 19px; line-height: 19px; padding: 11px 0 11px 10px; width: 192px; font-size: 16px ;}# wrap {border: 1px solid red ;}

Ff, ie8 container and input border coincide

Ie7

Ie6

How can this problem be solved? There are a lot of online saying that you can add float: left to the input, which can indeed eliminate the spacing, but it is likely that your layout will become completely invisible under ie, because many bugs are caused by float, and they also eliminate floating.

Float is a double-edged sword. If you don't need it, you don't need it.

Final Method

First input {border: 0; * margin:-1px 0;}. In this way, the border of the input box is eliminated and the input is compressed.

At this time, ie7 still has spacing. Then

Input [type = "text"] {
Background: none repeat scroll 0 0 transparent;
Border: medium none;
}

Finally, replace the input box border with the container border.

Check whether the height of the container is the same.