什么是-moz-和-webkit-？

Question

-webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;

我是CSS的初学者，而前几天我在看一些CSS代码时，发现了以下几行。在我以前学习CSS的教程中，我从未见过像这些行这样的内容。有人可以向我解释这些内容吗？或者给我一个可以学习实现这些内容的资源？

Answer 1

这些是相关渲染引擎（-webkit适用于Chrome，Safari；-moz适用于Firefox，-o适用于Opera，-ms适用于Internet
Explorer）提供的供应商前缀属性。通常，在W3最终澄清/定义之前，它们用于实现新的或专有的CSS功能。

这允许针对每个单独的浏览器/渲染引擎设置特定的属性，以便安全地解决实现之间的不一致。随着时间的流逝，前缀（至少在理论上）将被删除，因为该浏览器将实现该属性的无前缀最终版本。

为此，通常最好的做法是先指定供应商前缀的版本，然后再指定非前缀版本，以使非前缀属性在实现后将覆盖卖方前缀的属性设置。例如：

.elementClass {
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

具体来说，要解决您的问题中的CSS，请引用以下行：

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

为Webkit浏览器和Firefox 指定column-count，column-gap和column-fill属性。