两者之间的差距 <div> 垂直对齐

Question

I have a display problem with every browser except Firefox. I actually have this type of code

 <div id="conteneur"> <div id="milieu"> <div class="textPara"> <div id="conteneur"> <div id="cadre_selection_ecole"> <form id="form_search"> <input type="text" value="" /> <script type="text/javascript"> disableAutocomplete('search'); </script> <div id="listerecherche" style="margin-top:-15px; text-align:left"></div> </form> </div> </div> </div> </div> </div> <div id="footer"> SOME TEXT </div> 

The fact is that there is a gap created between "div id="milieu" " and "div id="footer" ". I already tried solutions that involve to add to css some browser webkits, font size and so on. When I use the code inspector, it shows me that this gap is nothing but a no-code zone.

You will find here the gap between the two divs .

Any suggestion ?

Answer 1

Your problem is that <form> has a height stablished by default (at least in Chrome, which is 39px). Eliminating this property should do the work (maybe you have to do extra work, as setting a <p>SOME TEXT</p> instead of pure text).

Answer 2

As suggested by RompePC (thanks), i tried the top rated solution here . I adapted it to my problem like that

 @media screen and (-webkit-min-device-pixel-ratio:0) { /* webkit specific CSS */ div#milieu { height:0px; } div#footer { height:0px; } } 

My problem is now solved.