如何为 calc 添加 webkit 支持？

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，Chrome25或者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 中引入的，它始终只使用 calc。您可以在 caniuse.

中检查计算支持

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

如何为 calc 添加 webkit 支持？

How to add webkit support to calc?

css

cross-browser