计算不起作用，即 11答案

【问题标题】：calc not working ie 11计算不起作用，即 11
【发布时间】：2014-10-04 04:36:34
【问题描述】：

经过研究，我确认 calc 应该适用于 ie8+，但它不适用于我。

这是我制作的一个 JS fiddle：

代码如下： HTML：

<div id="outer">
    <div id="inner">

    </div>
</div>

CSS：

#outer{
    width:400px;
    background-color:black;
    height:200px;
}
#inner{
    width:calc(80%-100px);
    width:expression(80%-100px);
    background-color:red;
    height:100%;

}

这是我看到的输出：

我做错了什么？

【问题讨论】：

stackoverflow.com/questions/16034397/css-calc-alternative 说要使用width: expression(100% - 500px);
calc() 不是 IE8+ 而是 IE9+。参考：caniuse 和 Quirksmode
我还发现z-index: calc(100 + 1);甚至z-index: calc(101);在IE11中都被破坏了。

标签： css cross-browser css-calc

【解决方案1】：

“-”应该用空格包围width:calc(80% - 100px);

Demo

【讨论】：

大声笑。谢谢。你会认为它不会因为缺少空间而发疯:)。现在不能接受你的回答，但一旦计时器用完 InshAllah 就会接受。
奇怪的数学运算方法^^
空白是 calc() 属性的杀手。另请注意：calc() 不能与视口单位 vw/vh 和其他类型的单位一起正常工作。即： calc(100vw - 25px) 不会渲染，但 calc(100vw - 2vw) 会。

【解决方案2】：

Demo

width:calc(80%-100px); 更改为 width:calc(80% - 100px);（'-' 符号之间的空格）

【讨论】：

是的，我知道！我正忙着发布答案，却没有意识到答案已经发布了..:)
是的，当然..:) @JunM 应得的！