为什么CSS calc()函数不适合我？

Question

我了解了CSS函数calc()及其真棒.我尝试使用它像:

#abc{width:calc(100%-20px)}

但是这个功能的问题在于它不起作用.我测试了这个代码IE9和Safari,它没有用.

为什么不起作用？

Answer 1

运算符" - "必须用空格包围:

#abc{width:calc(100% - 20px)}

引用MDN信息calc():"注意:+和 - 运算符必须始终用空格包围.例如,calc(50%-8px)的操作数将被解析为百分比,后跟负长度,无效表达式,而calc的操作数(50% - 8px)是百分比,后跟减号和长度".

关于此的正式声明在CSS值和单元模块级别3 CR的第8.1.1节中.

Answer 2

所有现代浏览器除了Android的本机浏览器支持外calc(),都更容易采用.但请注意,它会对布局产生重大影响,并因此在不受支持的浏览器上破坏您的设计.

您应该将它与回退声明一起使用,因此它不会破坏不支持它的浏览器.

width: 500px; /** older browsers **/ 

width: -webkit-calc(50% - 20px); /** Safari 6, Chrome 19-25 **/

width: -moz-calc(50% - 20px); /** FF 4-15  **/

width: calc(50% - 20px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/

Answer 3

IE9,IE10和Safari 6.0(使用-webkit-前缀)支持它.您可以在此处查看整个支持表:http://caniuse.com/#feat=calc