空 DIV 将其旁边的表格单元格中的内容下推答案

【问题标题】：Empty DIV pushes down content in table-cell next to it空 DIV 将其旁边的表格单元格中的内容下推
【发布时间】：2014-09-14 06:56:15
【问题描述】：

我在使用 display:table,table-row,table-cell 时遇到了一些奇怪的 CSS 行为

当一个表格单元格包含一个空的 div 时，它会下推它旁边的单元格的内容。

<html>
  <body>

    <div style="height:200px">
      <div style="display:table">
        <div style="display:table-row">
          <div style="display:table-cell">
            <div style="height:100px;width:200px;overflow-y:scroll"></div>
          </div>
          <div style="display:table-cell">
            <div style="height:100px;width:100px;overflow-y:scroll">Why am I getting pushed down?!?</div>  
          </div>
        </div>
     </div>
   </div>

   <div style="height:200px">
      <div style="display:table">
        <div style="display:table-row">
          <div style="display:table-cell">
            <div style="height:100px;width:200px;overflow-y:scroll">A</div>
          </div>
          <div style="display:table-cell">
            <div style="height:100px;width:100px;overflow-y:scroll">Suddenly I'm not getting pushed down?!?</div>  
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

如果我在 DIV 中放入一些内容，行为就会停止。这是一个错误吗？影响 Firefox 和 Chrome。如果不是错误，我该如何解决？

【问题讨论】：

标签： html css

【解决方案1】：

要解决这个问题，请将vertical-align:top 设置在空的 td 上。

FIDDLE

【讨论】：

仍然认为它看起来像一个错误：P
vertical:align 的默认值是baseline 所以我不认为这是一个错误

【解决方案2】：

不同的浏览器可以使用不同的系统很难说这是一个错误还是你的浏览器行为不同，或者可能是服务器未更新以检查此检查元素并检查代码是否匹配

【讨论】：