Question

我在Firefox中遇到一个CSS问题。我需要一个按钮来完全填充表格单元格高度。它在Chrome中运行良好，但在Firefox中无效。

Firefox（不正确）：

Chrome（正确）：

td - styles
table.custom-table-1 > tbody > tr > td.action {
    padding: 0px;
}
table.custom-table-1 > tbody > tr > td {
    font-size: 17px;
    padding: 5px 15px 2px;
}
.table-bordered > tbody > tr > td,{
    border: 1px solid #DDD;
}

button styles
table.custom-table-1 > tbody > tr > td.action > .btn {
    height: 100%;
    box-sizing: content-box;
    padding: 0px;
    border: medium none;
}
table.custom-table-1 > tbody > tr > td.action > .btn, .btn.delete {
    border-radius: 0px;
    margin-right: 0px;
    padding: 5px 10px;
    width: 33px;
    min-height: 33px;
}

HTML：

<td style="width: 30px;" class="action" > 
<button class="btn grey-silver"> 
  <span class="action"></span>
</button>   
</td>

请提供任何建议。谢谢。

Answer 1

你可以试试这个。

td - styles

table.custom-table-1 > tbody > tr > td.action {
    padding: 0px;
}
table.custom-table-1 > tbody > tr > td {
    font-size: 17px;
    padding: 5px 15px 2px;
    position: relative; /* MAKE TD'S RELATIVE */
}
.table-bordered > tbody > tr > td,{
    border: 1px solid #DDD;
}

button styles
table.custom-table-1 > tbody > tr > td.action > .btn {
    height: 100%;
    box-sizing: content-box;
    padding: 0px;
    border: medium none;
    position: absolute; /* MAKE POSITION ABSOLUTE */
    width: 100%; /* WITH 100% WIDTH */
}
table.custom-table-1 > tbody > tr > td.action > .btn, .btn.delete {
    border-radius: 0px;
    margin-right: 0px;
    padding: 5px 10px;
    width: 33px;
    min-height: 33px;
}

Answer 2

需要2件事，以便在Firefox中控制单元格高度：

table {table-layout：fixed; }
单元格内的块（例如div）元素。

只需增加块元素的高度，当它超过表格单元格的高度时，它不仅会拉伸单元格，还会拉伸tr，tbody和table。也没有溢出。

查看Firefox和Chrome中的代码段。

function adjHeight(H) {
    var tgt = document.querySelector("div");
    tgt.style.height = H+'px';
}

var ha = document.getElementById('htAdj');
ha.addEventListener('input', function(event) {
  var H = ha.value;
  return adjHeight(H);
}, false);

table {
  table-layout: fixed;
  border: 1px solid blue;
  width: 200px;
  height: 40px;
  }
td {
  border: 1px solid green;
  }
div {
  border: 2px dashed red;
  height: 0;
  }
input {
  display: inline-block; 
  width: 130px;
  }

<label>Height: +
<input id="htAdj" type="number"></label>

<table>
  <tbody>
    <tr>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      </tr>
    </tbody>
  </table>

Answer 3

您必须使按钮的父级高度（在您的情况下）为<td>元素100％。见this solution

CSS firefox td单元格按钮高度

3 个答案: