CSS计算不工作在Safari和后备 [英] CSS calc not working in Safari and fallback

问题描述

我有这个布局，我正在工作。
它强烈依赖于CSS calc来进行必要的计算。

I have this layout I am working on. It strongly depends on CSS calc to do the necessary calculations.

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

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

Now, I can't get this to work in Safari. Is there something I'm doing wrong?

还有一种方法，我可以为浏览器引入一个后退机制不支持它吗？百分比不会做得很好，因为我必须从中间两个减去对象。

And also, is there a way I can introduce a fall-back mechanism for browsers that don't support it? Percentage wont do a good job, since I have to subtract the object in the middle, from the two on the side.

感谢。

推荐答案

我解决这个问题的方法，引入一个纯CSS后退，旧的浏览器不支持CSS calc只读。

The way I solved this problem, is introducing a pure CSS fall-back, that older browsers that don't support CSS calc would only read.

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

左侧和右侧面板的宽度为48％读取计算值。

The left and right panels, get a width of 48% if the browser cannot read the calc values.

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

标志位于两个面板之间，的4％。还有一个最小宽度为40px。如果浏览器可以读取calc值，则它们为40像素。

And the logo, which sits in-between the two panels, gets a width of 4%. And also a minimum width of 40px. And if the calc values can be read by the browser, they are 40px.

这篇关于CSS计算不工作在Safari和后备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！