CSS calc 在 Safari 和后备中不起作用

我正在研究这个布局。 它强烈依赖 CSS calc 来进行必要的计算。

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

现在，我无法让它在 Safari 中工作。我做错了什么吗？

另外，有没有办法为不支持它的浏览器引入后备机制？百分比效果不好，因为我必须从侧面的两个对象中减去中间的对象。

Thanks.

我解决这个问题的方法是引入一个纯CSS后备，不支持CSS计算的旧浏览器只能读取。

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。如果浏览器可以读取计算值，则它们是 40px。