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

Question

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

我尝试这样做:height: calc(~"100% - 55px"); 在 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 中都运行良好