手机兼容问题

一：margin不生效问题
问题机型
魅族M353 Android 5.0.1
问题描述
设置了margin-top: 15px; 但是在该机型上不生效

解决方案
使用padding 替代 margin
二：空白导致的换行
问题机型
iphone5c
iphone4
其他未知机型
问题描述
两个字分开了，并且是竖着排列的

解决方式
发现div 标签中，字与div标签之间有空格，而其余行没有这个问题，所以删除空格尝试，发现好了！
所以解决方式为： 删除空格
三：svg矢量图在flex布局中样式扭曲的问题
问题机型
小米5
华为nova
其他未知的可能机型
问题描述
利用flex 布局的一行中，
左一样式：

-webkit-box-flex: 0;
    flex:  0 1 auto;

左二样式

-webkit-box-flex: 1; flex: 1 1 0%; width: 0px;

svg 所在的箭头的样式使用的是：

 width: 8px;
  position: relative;

解决
在svg元素上加上： transform: translate3d(0, 0, 0);
本文整理自博客：
https://www.cnblogs.com/shixiaomiao1122/p/7466770.html
https://www.cnblogs.com/shixiaomiao1122/p/7467185.html
https://www.cnblogs.com/shixiaomiao1122/p/7467149.html