计算器在IE 11中无法正常工作。

Question

经过调查，我确认 calc 应该在 IE8+ 中正常工作，但它对我不起作用。

这是我制作的 JSFiddle：

http://jsfiddle.net/75tzyLoo/

这是代码： 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%;

}

这是我看到的输出：

我做错了什么？

- Ahmed-Anas

---

https://dev59.com/FWQo5IYBdhLWcg3wdPO8 建议使用 width: expression(100% - 500px); - Stasik

calc() 不支持IE8，只支持IE9及以上版本。参考资料：caniuse 和 Quirksmode。 - FelipeAls

我还发现在IE11中，z-index: calc(100 + 1);甚至z-index: calc(101);都无法正常工作。 - Neal Ehardt

Answer 1

"-" 应该与空格分隔开来 width:calc(80% - 100px);

演示

- JunM

---

哈哈，谢谢。你会认为它不会因为一个空格而疯狂 :）。现在不能接受你的答案，但是倒计时结束后我会接受的，如果真主愿意的话。 - Ahmed-Anas

奇怪的数学计算方式 ^^ - singe3

空白符会影响calc()属性的解析。另外需要注意的是，calc()函数无法正确处理视窗单位vw/vh和其他类型的单位混合使用的情况。例如，calc(100vw - 25px) 无法被解析，但是 calc(100vw - 2vw) 可以。 - BJack

Answer 2

演示

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

- 4dgaurav

---

是的，我知道！我正在忙着发布答案，没有意识到答案已经被发布了.. :) - 4dgaurav

<1 分钟的差别。可能没有注意到。我会给你点赞，但是 JunM 获得选定标记 :)。 - Ahmed-Anas

当然没问题..:) @JunM 应该得到它！ - 4dgaurav