错误使用calc()在Safari 9中的表格单元格上

时间:2016-01-12 17:17:04

标签: html css safari html-table calc

我找不到有关此错误的任何信息,但它看起来非常严重。

使用calc()并混合百分比和绝对值来设置<th>表格中table-layout:fixed的宽度时,Safari 9会将值计算为-2px。如果所有值都是百分比或所有值都是像素,则它可以正常工作,但混合这两个值总会产生-2px之间的结果。

此问题是否有解决方法,是否在任何地方都记录了问题?

/* Table */

table {
  table-layout: fixed;
  width: 100%;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}

th {
  color: white;
}

th:first-child {
  /* width: calc(50%); works */
  /* width: calc(50% - 10%); works*/
  /* width: calc(400px - 100px); works*/
  width: calc(50% - 25px); /* calculates result of -2px */
  background: red;
}

th:last-child {
  background: blue;
}
<table>
  <thead>
     <tr>
       <th>First</th>
       <th>Last</th>
    </tr>
  </thead>
</table>

Codepen

0 个答案:

没有答案