Android 浏览器和旧版 safari 的 Css 顺序属性

Question

我正在使用 css order 属性:

#product_addtocart_form {display: flex; flex-direction: column;}
    #product_addtocart_form .product-img-box {order: 1;}
    #product_addtocart_form .product-shop {order: 2;}

我的问题是在 android 浏览器和旧版 safari 版本(iphone 4、4s)上不起作用。是否有适用于旧版 safari 和 android 浏览器的 webkit css 代码？提前致谢

Answer 1

使用 Autoprefixer输出:

#product_addtocart_form .product-img-box {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

#product_addtocart_form .product-shop {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

编辑2

对于容器来说，前缀样式是:

#product_addtocart_form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}