Question

使用display时我得到一些奇怪的CSS行为：table，table-row，table-cell

当一个表格单元格包含一个空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。如果它不是一个错误，我该如何解决它？

Answer 1

要解决此问题，请在空td上设置vertical-align:top。

<强> FIDDLE

Answer 2

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

空DIV按下它旁边的表格单元格中的内容

2 个答案: