CSS Calc无法在Safari和后备中使用

Question

我正在使用此布局。很大程度上取决于CSS calc进行必要的计算。

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

现在，我无法在Safari中使用它。我做错了什么吗？

而且，是否有一种方法可以为不支持该功能的浏览器引入后备机制？百分比不会做得很好，因为我必须从侧面的两个中减去中间的对象。

谢谢。

Answer 1

我解决此问题的方法是引入纯CSS后备功能，即不支持CSS calc的旧版浏览器只能读取。

figure.left {
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

如果浏览器无法读取计算值，则左右面板的宽度为48％。

figure.logo {   
    min-width: 40px;
    width: 4%;
    width: -webkit-calc(40px);
    width: -moz-calc(40px);
    width: calc(40px);
}

位于两个面板之间的徽标的宽度为4％。并且最小宽度为40px。如果浏览器可以读取calc值，则它们为40px。