Question

除Firefox外，每个浏览器都有显示问题。我实际上有这种类型的代码

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

事实是“div id =”milieu“”和“div id =”footer“”之间存在差距。我已经尝试过涉及向css添加一些浏览器webkits，字体大小等的解决方案。当我使用代码检查器时，它向我显示这个差距只是一个无代码区域。

你会在这里找到the gap between the two divs。

有什么建议吗？

Answer 1

您的问题是<form>默认高度已确定（至少在Chrome中为39px）。消除这个属性应该做的工作（也许你需要做额外的工作，因为设置<p>SOME TEXT</p>而不是纯文本。）

Answer 2

正如RompePC所建议的那样（感谢），我尝试了最高等级的解决方案here。我把它改编成了我的问题

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

我的问题现在已经解决了。

两个<div>之间的间隙垂直对齐

2 个答案: