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

Question

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

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

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

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

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

关于我如何才能深入了解这一点的任何想法？

score 28 · Accepted Answer

我发现了问题。在其中一个内部 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 中都可以正常工作

score 1 · Accepted Answer

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

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

请参阅CanIUse.com。

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

2 回答 2