Html calc（）CSS属性在旧浏览器中如何降级

考虑到calc（）CSS属性与大多数浏览器（cf）的兼容性相当好，我仍然想知道它在较旧的浏览器中是如何退化的，尤其是在Android浏览器上，因为只有最新版本似乎能够很好地处理它。我不太在乎IE的支持

这是一个相当普遍的问题，但这里有一个小例子

我想知道这些特性将如何退化：

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

---

不支持CSS3

calc

的浏览器将忽略出现无法识别值的声明。这与您从未将它们包含在CSS文件中的情况相同

在你的小提琴中，结果如下：

当您使用

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);

---

不支持calc的浏览器将采用高度和宽度作为默认值，而不会采用给定的宽度或高度值

为不支持calc（）函数的浏览器提供回退宽度，并为Firefox4提供供应商前缀

div {    
    background:lime;

    width: 96%; /* Fallback for browsers that don't support the calc() function */

    height: 96%; /* Fallback for browsers that don't support the calc() function */

    width: -webkit-calc(50% - 50px); 
    width: -moz-calc(100% - 50px); /* vendor prefix for FF 4 */
    width: calc(100% - 50px);

    height: -webkit-calc(50% - 50px);
    height: -moz-calc(100% - 50px);      
    height: calc(100% - 50px);

}

---

为什么不使用padding或margin？因为当你有一个100px高度的菜单栏，你想让下面的块用

高度占据页面的剩余部分：calc（100%-100px）

，这个属性非常有用

-o-calc（）

不存在并且可以删除。确切地说，根据CSS错误处理原则，将忽略出现无法识别值的声明，而不是整个规则。@JukkaK.Korpela已编辑。