Safari中的CSS calc（）具有浮点值

Question

我在Safari中遇到了CSS函数calc的问题。

我有以下代码：https://jsfiddle.net/0Lugw0zq/1/

＆＃13;

＆＃13;

#parent {
  position: absolute;
  height: 32px;
  width: 120.77px;
  background-color: red;
  border: 5px solid black;
}
#child {
  position: absolute;
  height: 32px;
  left: 12px;
  width: calc(100% - 12px);
  background-color: black;
}

＆＃13;

<div id="parent">
  <div id="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

在Chrome / Firefox中，您会在左侧看到一个黑框和一个较小的红色框，而在Safari中，框的右侧会有一条额外的细红线。

注意父容器的宽度如何具有浮点值（120.77px）。子容器的宽度是用calc(100% - 12px)计算的，这导致Safari中的108px而不是108.77px - 显然是由于整数解析。

如何阻止Safari显示这条细线？