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

可能的解决方案是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>

Answer 2

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

.buttons tr td {
    width: 16.66667%;
}

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

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

2 个答案: