css/Less calc() 方法使我的 IE10 崩溃答案

【问题标题】：css/Less calc() method is crashing my IE10css/Less calc() 方法使我的 IE10 崩溃
【发布时间】：2013-10-25 17:54:26
【问题描述】：

我试图让 div 中的高度比父 div 小 55px。

我试图这样做：height: calc(~"100% - 55px"); in less 创建了这个：height: calc(100% - 55px);

这在 Chrome 和 Firefox 中运行良好，但在 IE10 上崩溃。

不是它不起作用，而是它崩溃了。这很奇怪，我试图在网上找到一些信息，但什么都看不到。

此外，这只发生在高度上。如果我在宽度上使用calc() 方法，它运行良好。

有什么办法可以查明真相吗？

【问题讨论】：

这听起来很奇怪。你能提供一个 jsFiddle 示例来演示它吗？
我对您的代码 (jsfiddle.net/wyRXp) 进行的非常基本的测试不会导致浏览器崩溃，因此很明显，发生的事情比您所说的更复杂。请向我们展示一个触发错误的示例。
好的，所以按照您的示例，我为此创建了一个 jsFiddle 演示。我已经在其中添加了更多其他代码，以查看它在哪里中断，看起来它可能是 kendoUI 和 calc() 方法的组合。我将尝试将其追踪到与该方法发生冲突的 kendoUI 的确切位置，并与 Telerik 的人一起提出，希望他们能够对此有所了解。 fiddle.jshell.net/zawisza/75mtH
对不起 KendoUI 伙计们，我在上面的评论中过早地责怪了你。我找到了真正的原因。请参阅下面的答案。

【解决方案1】：

在 IE10 中 calc() 存在一个已知问题

Internet Explorer（根据规范）不接受没有空格的加法/减法计算（即 calc(100%-30px) 无效，但 calc(100% - 30px) 可以正常工作）。

请参阅CanIUse.com。

您崩溃的最可能原因是 Less 在转义值时删除了空格。

【讨论】：

即使去掉了空格，最糟糕的是它会忽略它；它不应该让浏览器崩溃（就我的测试而言，它不会）。
你永远不知道。也许，如果没有空格，这个特定的值会被 IE10 以某种方式解释，但它被解释为错误的。由于calc() 几乎在每个事件上都会执行，它可能会导致大量 CPU 使用最终导致崩溃。
我考虑了这一点，并尝试通过一个单独的 css 文件添加额外的 css 代码，该文件不是由 less 生成的。但这没有帮助。

【解决方案2】：

我发现了问题。在其中一个内部 div 中有一个 height:inherit。显然 IE 对此感到非常困惑，因为该值是计算出来的并且显然不可继承。现在一切都好。

换句话说，你不能做这样的事情：

<div style="height:100%">
  <div style="height: calc(100% - 50px)">
    <div style="height:inherit">
    </div>
  </div>
</div>

如果你这样做 IE10 会崩溃，这里是一个例子：http://jsfiddle.net/wyRXp/1/

这里我取出了继承高度：http://jsfiddle.net/wyRXp/2/ 而且效果很好。

以上两个示例在 Firefox 和 Chrome 中都可以正常工作

【讨论】：

很好地隔离了问题。 :) 您应该将您的答案标记为已接受，以帮助其他人寻找相同的问题。顺便说一句，就其价值而言，您的小提琴会导致 IE10 崩溃，但不会导致 IE11 崩溃。