如何将webkit支持添加到calc？

Question

我可以看到，使用webkit时，calc更加兼容。通常当你添加对webkit或moz的支持时，你可以这样做：

-webkit-font-smoothing: antialiased; 
-webkit-text-size-adjust: 100%; 

什么是calc的正确语法？

width: -webkit-calc(100% - 100px); 

Answer 1

用于计算正确的语法是

/* Firefox */ 
width: -moz-calc(100% - 100px); 
/* WebKit */ 
width: -webkit-calc(100% - 100px); 
/* Opera */ 
width: -o-calc(100% - 100px); 
/* Standard */ 
width: calc(100% - 100px) 

Answer 2

至少你需要支持Safari浏览器6时，Chrome 25或FF 15，你只需要编写width: calc(100% - 100px)

// Firefox 4 to 15 
width: -moz-calc(100% - 100px); 

// Chrome 19 to 25 
// Safari 6 
width: -webkit-calc(100% - 100px); 

// Standard 
width: calc(100% - 100px) 

// Note: Never existed a Opera prefix for calc 

注意从未存在Opera前缀-o-calc，因为在Opera中引入了calc，它始终只使用calc。您可以检查caniuse中的计算支持。

我建议你，当你对供应商前缀有疑问时，你应该检查它是否需要。例如从未存在的Opera的-o-calc(100% - 100px)。或者，您可能不需要供应商前缀，因为您不再支持旧版本的特定浏览器。例如，你可能不需要支持FF 15，如果是这种情况，你不应该使用width: -moz-calc(100% - 100px)。