相关疑难解决方法(0)

为了覆盖最广泛的浏览器和版本,为CSS添加前缀的正确方法是什么？

版本1:

-webkit-transition: -webkit-transform .3s ease-in-out;
   -moz-transition:    -moz-transform .3s ease-in-out;
    -ms-transition:     -ms-transform .3s ease-in-out;
     -o-transition:      -o-transform .3s ease-in-out;
        transition:         transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

或版本2:

-webkit-transition: transform .3s ease-in-out;
   -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
     -o-transition: transform .3s ease-in-out;
        transition  transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

在我看来,当在转换属性上使用供应商前缀时,我还应该定位我想要转换的供应商前缀属性.

我真的找不到任何关闭.

在IE10或11中查看此JSBin.

如果检查#test元素,您将看到它将转换属性显示为-webkit-transform(并且不会发生转换).如果您注释掉transition: -webkit-transform;声明,如在这里,然后过渡工作.

为什么IE没有将供应商前缀值作为无效的属性值丢弃？顺便说一句,如果我在Chrome上做类似的事情 - 比如说,-ms-transition在-webkit-transition它之后- 它会丢弃它,并且只使用-webkit-transition声明.似乎仅在IE上这是一个问题.