获取百分比在Firefox和Safari的CSS calc（）中工作？ [英] Getting percentages to work in CSS calc() for Firefox and Safari?

问题描述

我使用以下calc（）方程来计算两个div的宽度：

CSS

  .MyClass {
 width：calc（（100％ -  800px）/ 2）; 
 width：-moz-calc（（100％ -  800px）/ 2）; 
 width：-webkit-calc（（100％ -  800px）/ 2）; 
} 
  

这适用于Chrome和IE，但不适用于Firefox和Safari。我注意到Firefox似乎无法解释百分比。例如，以下内容将显示正确：

CSS

 code> width：calc（（1000px  -  800px）/ 2）; 
  

有任何建议吗？

/ p>

更新

所以我的预处理器正在创建css， ：

SCSS

  .MyClass {
 width：calc（（100％ - ＃{$ WrapperWidth}）/ 2）; 
 width：-moz-calc（（100％ - ＃{$ WrapperWidth}）/ 2）; 
 width：-webkit-calc（（100％ - ＃{$ WrapperWidth}）/ 2）; 
} 
  

CSS

  .MyClass {
 width：calc（（100％ -  800px）/ 2）; 
 width：-moz-calc（100％-800px / 2）; 
 width：-webkit-calc（100％-800px / 2）; 
} 
  

我已经尝试纠正它，但它似乎还不工作。
浏览器的代码仍然是：

  width：calc（（100％ -  800px）/ 2）; 
  

似乎没有读-moz-calc。

解决方案

Eureka。我一直在努力这个几天。最后发现，100vh，而不是100％将使它与大多数浏览器工作。

  height：calc（100vh  -  100px） 
  

而不是

  height：calc（100％ -  100px）; 
  

最后，现在我可以继续我的项目。

I'm using the following calc() equation to calculate the width of two divs:

CSS

.MyClass {
    width: calc((100% - 800px) / 2);
    width: -moz-calc((100% - 800px) / 2);
    width: -webkit-calc((100% - 800px) / 2);
}

This works fine for Chrome and IE, but not Firefox and Safari. I've noticed that Firefox seems unable to interpret the percentage. For example the following will display fine:

CSS

width: calc((1000px - 800px) / 2);

Any advice?

Thanks.

Update

So out my pre-processor is creating css that looks like this:

SCSS

.MyClass {
    width: calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
    width: -moz-calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
    width: -webkit-calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
}

CSS

.MyClass {
  width: calc( ( 100% - 800px ) / 2);
  width: -moz-calc(100%-800px/2);
  width: -webkit-calc(100%-800px/2);
}

I've tried correcting it but it still doesn't seem to be working. The code from the browser is still:

width: calc((100% - 800px) / 2);

It doesn't seem to be reading the -moz-calc though.

解决方案

Eureka. I've been struggeling with this for days. Finally found that 100vh instead off 100% would make it work with most browsers.

height: calc(100vh - 100px);

instead of

height: calc(100% - 100px);

Finally, now I can get on with my project.

这篇关于获取百分比在Firefox和Safari的CSS calc（）中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！