为什么 display:block 会影响 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 {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>