html - 为什么显示:block affect vertical alignment in Firefox?

Question

请参阅下面的代码。这在 Chrome 和 Edge 中看起来不错，但它会将文本与 Firefox 中的底部对齐。还有 check this CodePen在不同的浏览器中看看我的意思。这是什么原因造成的？

.table {display:table;}
.row {display:table-row;}
.cell{display:table-cell;}
.input input{display:block; margin:10px 0;}

<div class="table">
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
  </div>  
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
   </div> 
</div>

Answer 1

要解决此问题，您可以将 vertical-align: middle; 添加到您的 .cell 类中。此外，我会在 .cell 本身内使用 padding 创建元素周围的垂直间距。这样，所有单元格共享相同的间距。

.table {display: table;}
.row {display: table-row;}

.cell {
  display: table-cell;
  padding: 0 0 10px 0;
  vertical-align: middle;
}

.input input {
  display: block;
  padding: 20px;
}

<div class="table">
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
  </div>  
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
   </div> 
</div>