CSS firefox td 单元格按钮高度答案

【问题标题】：CSS firefox td cell button heightCSS firefox td 单元格按钮高度
【发布时间】：2016-03-13 10:06:54
【问题描述】：

我在 Firefox 中遇到了一个 CSS 问题。我需要一个按钮来完全填充表格单元格的高度。它在 Chrome 中运行良好，但在 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>

请就此提出任何建议。谢谢。

【问题讨论】：

您提供了 CSS 来设置 <table> 的样式，并在您的问题中提供了一个 <td>。如果您向我们展示了正确/错误呈现的 <table>，请提供足够的 HTML 和 CSS，以便我们可以重现您展示的视觉结构。
@AndreyP 请查看我的回答，让我知道它是否解决了您的问题。

标签： html css firefox

【解决方案1】：

你可以试试这个。

td - 样式

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;
}

【讨论】：

@AndreyP 太好了，如果您可以通过单击我的答案旁边的复选标记将我的答案标记为“正确”。
不幸的是，现在按钮出现的需要少了 1px :( i.gyazo.com/3f497163ade4295886348c2741a26826.png
将.btn上的box-sizing更改为box-sizing: border-box;

【解决方案2】：

需要两件事才能在 Firefox 中控制单元格高度：

表格{表格布局：固定； }
单元格内的块（例如 div）元素。

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

查看 Firefox 和 Chrome 中的 sn-p。

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>

【讨论】：

【解决方案3】：

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

【讨论】：