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

如果浏览器无法读取calc值,则左侧和右侧面板的宽度为48%.

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

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