css - 为什么我的 calc() 在除 Chrome 之外的所有浏览器的表中使用时都会失败？

Question

我calc用来指定表格单元格的宽度。这适用于 Chrome，但不适用于其他浏览器。

Caniuse 没有提及其他浏览器中与 calc 相关的任何问题。

HTML：

<table>
  <thead>
    <tr>
      <th class="first">One</th>
      <th class="second">Two</th>
      <th class="third">Three</th>
      <th class="fourth">Four</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="first"></td>
      <td class="second"></td>
      <td class="third"></td>
      <td class="fourth"></td>
    </tr>
  </tbody>
</table>

CSS（虽然我使用的是 Sass）：

table {
    width: 1200px;
    margin: 20px auto 0;
    table-layout: fixed;
}

th:nth-child(2n) {
    background: grey;
}

th.first {
    width: calc(100% * 0.1);
}

th.second {
    width: calc(100% * 0.4);
}

th.third {
    width: calc(100% * 0.25);
}

th.fourth {
    width: calc(100% * 0.25);
}

如您所见，IE11 将所有单元格解析为相同的宽度：

这里有一个 CodePen 。