ios - 使用百分比和像素时，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 来解决它，或者有一些像只有百分比而不是计算的后备一样简单的东西。

谁有解决这个问题的好主意？

如果您想自己测试一下，这里有一个 fiddler :

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

Answer 1

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

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