-moz-calc 跨浏览器（polyfills？钩子？）答案

【问题标题】：-moz-calc crossbrowser (polyfills? hooks?)-moz-calc 跨浏览器（polyfills？钩子？）
【发布时间】：2012-02-09 18:36:01
【问题描述】：

我目前正在从事一些项目，其中我正在使用 LESS、CSS3 和其他一些“花哨”技术。我有一些代码可以为我计算高度：

height: -moz-calc(100% - 40px);

我还在其他几个地方使用 -moz-calc 来计算一些东西。问题是让它跨浏览器（O、Safari、Chrome、IE8+）工作。即使我尝试通过 JS (jquery) 来做这件事也有点棘手，但不幸的是，有些情况确实很棘手。所以我正在寻找某种具有自动更新功能的防弹解决方案，就像 CSS 的 calc() 一样。

【问题讨论】：

为什么你不能用 LESS 做到这一点？ “防弹解决方案”可能不存在（在 CSS 中肯定不存在），您如何使用 JavaScript/jQuery 进行尝试？
@Madmartigan 我无法在我的 LESS 文件中运行 JS。不知道为什么。实际上我可以做这样的事情 '@var: "hello".toUpperCase();'但是这个'@height：document.body.clientHeight;'根本不起作用。

标签： javascript jquery css css-calc

【解决方案1】：

Webkit 刚刚获得了前缀 calc() 支持。 -webkit-calc() 目前在 Chrome 开发版本中工作，应该包含在 Chrome 和 Safari 的下一个版本中。

【讨论】：

【解决方案2】：

http://caniuse.com/calc

https://developer.mozilla.org/en/CSS/calc

-webkit-calc（在 Chrome 19 Dev 版本中可用，应该在下一个 Safari 中可用）

calc (IE9)

---（Opera 还不支持）

【讨论】：

你也可以使用 IE CSS 表达式来与旧版 IE 兼容（trollface）但你不应该这样做。
不幸的是，尚不支持 -webkit-calc。所以 calc() 仅适用于 IE9+、Firefox，仅此而已。这就是我寻找 polyfills/hooks 的原因
啊，..真的。但他们正在努力。 bugs.webkit.org/show_bug.cgi?id=16662 , - 所以你现在唯一的解决方案是 JS，看起来。