供应商前缀的实现方式不同。其中一些采用不同的参数或以不同的顺序,例如梯度。在这种情况下,您将无法编写通用的 -vendor-gradient 因为它们不采用相同的参数。
在您拥有的供应商前缀列表中,
- 安卓:-webkit-
- 铬:-webkit-
- 火狐:-moz-
- Internet Explorer:-ms-
- iOS:-webkit-
- 歌剧:-o-
- Safari:-webkit-
我使用了渐变生成器,输出是针对某些特定渐变的
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* Firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1E5799), color-stop(50%, #2989D8), color-stop(51%, #207CCA), color-stop(100%, #7DB9E8)); /* Chrome and Safari4+ */
background: -webkit-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* Chrome 10+ and Safari 5.1+ */
background: -o-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* Internet Explorer 10+ */
background: linear-gradient(to bottom, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7DB9E8', GradientType=0 ); /* Internet Explorer 6-9 */
可以看到参数不一样。我记得的另一个例子是我使用 flex 元素时的 content justify:
justify-content: space-between;
-moz-justify-content: space-between;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
在那里你可以看到,对于 -ms- 供应商参数和属性是不同的,以实现相同的结果。
厂商有自己不同的实现方式,不能一概而论。