如何将Webkit支持添加到calc？

Question

我可以看到使用webkit时calc更兼容。通常，当您添加对Webkit或Moz的支持时，您会执行以下操作：

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

calc的正确语法是什么？

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

Answer 1

calc的正确语法是

/* 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，因为 calc 是在 Opera 中引入的，它总是使用 just calc。您可以在caniuse 中检查 calc 支持。

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