使用百分比和像素时，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

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

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

Answer 2

尝试使用webkit前缀MDN

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