Eliminate the gap between the upper and lower edges of the input box and the container in ie6 7_html/css_WEB-ITnose

This bug is very 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 overlap

ie7

ie6

How to solve it? There are many people on the Internet who say that just adding float:left to the input can indeed eliminate the margins, but it is likely to make your layout completely different under IE, because many bugs are caused by float, and there are more of them. Eliminate the float thing.

Float is a double-edged sword. If you can’t use it, don’t use it.

Final method

First input{border:0;*margin:-1px 0;}, at this time, ie7 still has spacing. Then

input[type="text"] {
background: none repeat scroll 0 0 transparent;
border:medium none;
}

Look at the container at this time Are the heights consistent?