如何在另一个函数中使用calc()

Question

在CSS函数（例如transform或者translate）中使用calc()函数是否可行？我无法让它起作用。以下是一个演示链接，您可以自由尝试：

http://jsfiddle.net/qdJwY/1/

- cmplieger

---

我认为翻译不涉及百分比。如果您使用像素而不是百分比，它确实有效，但我想这会失去意义。 - Musa

是的，但还是谢谢你的努力 :) - cmplieger

Answer 1

您可以在CSS中任何可以使用基于长度的值的地方使用 calc()。您提供的示例确实有效，但实际上只是加起来等于0。以下是稍作修改的演示: http://jsfiddle.net/joshnh/6ydR3/ 另外，请确保将未添加前缀的版本列在最后。

在变换中使用 calc() 函数混合百分比和其他值类型在 Chrome 中似乎根本不起作用。我会将此报告为错误。

更新: 这已经被报告为一个错误，链接在这里: https://code.google.com/p/chromium/issues/detail?id=150054

- joshnh

---

在IE10中也不起作用 :(. 我猜这还不是一个合适的解决方案... 感谢您的回答 :) - cmplieger

Answer 2

它有效：http://jsfiddle.net/qdJwY/2/

(编辑：仅在Firefox中测试)

在您的示例中，恰好100％= 200px，因此您将其翻译为零。

- user123444555621

---

最新版的 Opera 和 Chrome 不支持。 - Musa