calc()CSS属性如何在旧浏览器中降级

Question

考虑到calc()CSS属性与大多数浏览器相当兼容(参见http://caniuse.com/calc),我仍然想知道它在旧浏览器中是如何降级的,特别是在Android浏览器上,因为只有最后一个版本似乎处理得好.我不太关心IE支持.

这是一个普遍的问题,但这里有一个小例子http://jsfiddle.net/7swVc/

我想知道这些属性会如何降级:

width:calc(100% - 50px);
height:calc(100% - 50px);

Answer 1

不支持CSS3的浏览器calc将忽略出现无法识别的值的声明.它将与您从未将它们包含在CSS文件中相同.

在你的小提琴中,结果将是这样的:DEMO

当您使用时,calc您总是为不支持它的浏览器设置回退.所以你的CSS应该是这样的:

width: 600px;/*fallback for browsers dont use support calc*/
width: -webkit-calc(100% - 50px);
width: -moz-calc(100% - 50px);
width: calc(100% - 50px);