javascript - 顶部对齐 flexbox 中的文本

Question

我创建了一个布局，其中有带文本的按钮。

我想要完成的是让 flexbox 在 IE 上正常工作，并弄清楚如何让文本在每个顶部对齐。

我尝试了 vertical-align: top; 但没有成功:

文本顶部对齐

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

<table class=flexbox>
  <tr>
    <td>
      <button>Hello there my name is bob and this is a test Hello there my name is bob and this is a test Hello there my name is bob and this is a test</button>
      <td style="vertical-align:top;">
        <button>B</button>
        <td>
          <button>C</button>
          <td>
            <button>D</button>
            <td>
              <button>E</button>
              <td>
                <button>GF</button>
              </td>
  </tr>
</table>

http://jsfiddle.net/tXS6w/443/

Answer 1

Flexbox 不能很好地与 button 元素搭配使用。事实上，button doesn't even recognize flex properties in some browsers .

这里有一个可能适合您的替代方案。它是纯 CSS、响应式且跨浏览器工作(在 Chrome、FF 和 IE11 上测试)。此外，不需要高度。

.flexbox {
  display: flex;
}
.flexbox > section {
  flex: 1;
  display: flex;
  text-align: center;
  margin: 10px;
  min-width: 50px;
  border: 1px solid #777;
  background: linear-gradient(to bottom, #fafafa 0%, #ddd 100%);
}
.flexbox > section > a {
  flex: 1;
  padding: 2px 5px;
  color: black;
  text-decoration: none;
}
.flexbox > section:hover {
  background: linear-gradient(to bottom, #f1f1f1 0%, #d1d1d1 100%);
}

<div class="flexbox">
  <section>
    <a href="javascript:void(0)">
      Hello there my name is bob and this is a test Hello there my name
      is bob and this is a test Hello there my name is bob and this is a
      test
    </a>
  </section>
  <section>
    <a href="javascript:void(0)">B</a>
  </section>
  <section>
    <a href="javascript:void(0)">C</a>
  </section>
  <section>
    <a href="javascript:void(0)">D</a>
  </section>
  <section>
    <a href="javascript:void(0)">E</a>
  </section>
  <section>
    <a href="javascript:void(0)">GF</a>
  </section>
</div>

jsFiddle