firefox浏览器table的td内div高度无法填满td高度

在开发后台管理系统，我们都需要跟 table 来展示列表数据，通常会遇到一个问题，table 的 td 内 div 高度无法填满 td 高度。即使将 div 的高度设置为 height:100%，div 并不能如预期那样完全填满 td 的高度。那么如何解决这个问题呢？经过测试，在 Chrome 和 Firefox 浏览器中，解决方案是不同的。

假如有如下 table 布局

<style>
  table {
    border-collapse: collapse;
  }
  table tr td {
    border: 1px solid #555;
  }
  .inner-div {
    height: 100%;
    background-color: cornflowerblue;
  }
</style>
<table>
  <tr>
    <td>
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </td>
    <td>
      <div class="inner-div">填满高度</div>
    </td>
  </tr>
</table>

这时候无论在 Chrome 还是 Firefox 浏览器中，div 都无法填满 td 的高度。

Chrome 浏览器

在 Chrome 浏览器中，只需要将 td 的高度设置为 height: 1px; 即可，例如下面代码

table tr td {
  border: 1px solid #555;
  height: 1px;
}

Firefox 浏览器

然而上述方法在 Firefox 浏览器中并不起作用，我们需要针对 Firefox 浏览器做特殊处理，这里需要用到 @-moz-document url-prefix() 选择器，设置 td 的高度为 100%，并且内部的 div 需要设置 diplay 为 inner-table 或 table

@-moz-document url-prefix() {
  table tr td {
    height: 100%;
  }

  .inner-div {
    diplay: inline-table;
    height: 100%;
  }
}

完整的代码如下

See the Pen css by kelen (@hkelen) on CodePen.