使用百分比和像素时，Calc无法在iOS 11.2.1 safari上运行

Question

我有一个像课一样简单的东西

.left {
  left: calc(50% - 200px);
}

但是这个类的元素根本不向左移动。 如果我将其更改为仅有效百分比：

.left {
  left: calc(50%);
}

并且它不是减号或加号因为添加和删除百分比以及添加和删除像素都可以正常工作：

.left {
  left: calc(50% - 20%);
}

.left{
  left: calc(300px - 200px);
}

这只发生在最新的iOS更新之后，所以11.2.1。 我想这是一个错误，但我想解决它，以防苹果永远解决它。 我不太确定我是应该用js来解决它还是只有一个简单的回退，只有百分比和没有计算。

有人有什么好主意如何解决这个问题？

如果您想自己测试一下，这是一个小提琴手：

https://jsfiddle.net/zk5wt3de/1/

Answer 1

我有同样的问题：calc中的百分比似乎不起作用。 通过设置宽度和最大宽度，我能够获得正确的大小。

  width: 100%;
  max-width: calc(100% - 62px);

Answer 2

尝试使用webkit前缀MDN

-webkit-calc(50% - 200px);
-moz-calc(50% - 200px);
 calc(50% - 200px);