html - 如何在Firefox中使<div>填充<td>高度

Over here，已为IE和Chrome回答了该问题，但建议的解决方案似乎无法在Firefox 16、45以及两者之间的所有版本中使用。

基本上，建议的解决方案如下:

table,th,td {
  border: 1px solid black;
}

<table>
  <tr>
    <td style="height:1px;">
      <div style="border:1px solid red; height:100%;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

通过将height的td设置为1px，子div可以设置height:100%。在Chrome和IE中，100%会被解释为“单元格的高度”，而在Firefox中，div似乎已成为ojit_code内容所需的最大高度。

在Firefox中运行上面的示例将直观地说明这一点。

因此，我正在寻找一种在Firefox中也可以使用的解决方案。

最佳答案

尝试将display: table添加到嵌套的<div>中，然后将父height: 1px上的height: 100%更改为<td>
在Firefox，IE和Chrome中运行的示例

table,
th,
td {
  border: 1px solid black;
}

.fix_height {
  height: 1px;
}

@-moz-document url-prefix() {
   .fix_height {
        height: 100%;
    }
}

<table>
  <tr>
    <td class="fix_height">
      <div style="border:1px solid red; height:100%; display:inline-table">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

关于html - 如何在Firefox中使<div>填充<td>高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36575846/