css / Less calc（）方法崩溃我的IE10

Question

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

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

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

并不是它不起作用但它会崩溃。这很奇怪，我试图在线找到一些信息，但看不到任何东西。

此外，只有高度才会发生这种情况。如果我在宽度上使用calc()方法，它运行正常。

关于我如何能够找到底线的任何想法？

Answer 1

我发现了问题。有一个高度：继承其中一个内部div。 显然，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中都能正常运行

Answer 2

IE10中有calc()的已知问题

  

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

请参阅CanIUse.com。

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