无论文本/跨浏览器支持如何，都使按钮大小相同

Question

我创建了一个 JSFiddle，其中显示了 6 个按钮和每个内部的文本。我想要完成的是弄清楚为什么在 Chrome 上它看起来很好，其中所有按钮都将匹配最大按钮的大小（文本最多的那个），而在其他浏览器上，按钮不匹配： http://jsfiddle.net/tXS6w/432/

<table class=buttons>
 <tr>
    <td><button type="button">Hello there my name is bob and this is a test  </button>
    <td><button type="button">B</button>
    <td><button type="button">C</button>
    <td><button type="button">D</button>
    <td><button type="button">E</button>
      <td><button type="button">F</button>
</table>

css

.buttons { 
  width: 100%;
  table-layout: fixed;
}
.buttons button { 
  width: 100%;
  height: 100%;
  white-space: normal;
}

Answer 1

当您通过 CSS 将宽度设置为百分比时，它将是包含元素大小的百分比。在这种情况下，<td>。由于这些没有定义宽度，因此尺寸可能无法预测。似乎有些浏览器会平均调整单元格的大小，而其他浏览器则不会。就像@Mumeltier 所说，如果您将大小设置为 px 而不是 percent 将起作用。但我猜你不想在 px 中硬编码大小。因此，一种选择是将表格单元格的宽度设置为表格大小的 1/6：

.buttons tr td {
    width: 16.66667%;
}

我没有安装能说明您遇到的问题的浏览器，因此我不能 100% 确定此解决方案是否适合您。

Answer 2

一个可能的解决方案是 Flexbox

.buttons {
  width: 100%;
  table-layout: fixed;
}
.buttons tr {
  display: flex;
}
.buttons tr td {
  flex: 1;
  display: flex;
  flex-direction: column;
}
button {
  flex: 1;
}

<table class=buttons>
  <tr>
    <td>
      <button type="button">Hello there my name is bob and this is a test</button>
    </td>
    <td>
      <button type="button">B</button>
    </td>
    <td>
      <button type="button">C</button>
    </td>
    <td>
      <button type="button">D</button>
    </td>
    <td>
      <button type="button">E</button>
    </td>
    <td>
      <button type="button">GF</button>
    </td>
  </tr>
</table>