计算不工作即11

Ahm*_*nas 14 css cross-browser css3 css-calc

在研究之后,我确认calc应该适用于ie8 +,但它对我不起作用.

这是我制作的JS小提琴:

http://jsfiddle.net/75tzyLoo/

这是代码:HTML:

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

    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

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

}
Run Code Online (Sandbox Code Playgroud)

这是我看到的输出: JS Fiddle输出为calc不起作用

我究竟做错了什么?

Jun*_*unM 35

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

Demo

  • 空格是calc()属性的杀手er。还要注意:calc()无法与视口单位vw / vh和其他类型的单位一起正常使用。即:不会渲染calc(100vw-25px),但是会渲染calc(100vw-2vw)。 (2认同)

4dg*_*rav 18

演示

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

  • 是的,我知道!我正忙于发布答案,却没有意识到答案已经发布.. :) (2认同)