CSS3的clac()函数无效,警告提示“invalid property value”

今天写前端页面代码是遇到的问题,前端页面要求自适应各分辨率,然后就想到了用CSS3的calc()函数来实现,calc函数是CSS3中一个进行四则运算的函数,很适合运用在有已知数值情况下的宽度或高度设置。

但是在写入后在前端页面却并未生效,警告提示“invalid property value”,我的css是这样写的:width:calc(100%-107px); ,查看了网上一些小伙伴的解决方案,有人提出将clac里的px去掉(width:calc(100% - 107);),很显然不行,官方写法也是有px在的,后来在一个在线的CSS参考手册里找到了我想要的答案,原来在用calc的时候运算符前后都需要保留一个空格,否则表达式不生效

CSS3的clac()函数无效,警告提示“invalid property value”

 

CSS3参考手册地址:http://www.css88.com/book/css/values/functional/calc().htm