H5移动端页面一些坑总结1

      最近项目开始大量使用H5构建移动端页面，各路神机也开始填坑了。

1.flex盒模型

最新写法： display: flex; 

酷派，三星等安卓手机需加上display: -webkit-box;兼容

否则，子元素中flex:1的无法撑开宽度

2.flex-wrap:wrap;

三星手机中，flex盒模型的子元素必须display:inline-block；如果是block，则三星手机不会换行，如果是inline元素（比如<a>），则宽度不会撑开，仍然表现为内联元素

3.flex-direction: column;

三星手机不支持，无法使用margin-top:auto使子元素自动在最下

4.background-size:100% auto;

部分安卓机不支持该属性在background中的连写，必须拆分开来。例如：background：url(img.jpg) no-repeat/100% 100%,部分安卓机图片直接不显示

5.盒模型中的子元素宽度问题

盒模型100%宽度，子元素20%，三星手机一排只显示2个，(⊙﹏⊙)b，改成19%，OK了。

6，flex元素中嵌套flex

三星手机出错，必须父元素为flex，而其它祖先元素为block

7.text-indent和box-sizing

部分安卓机中使用text-indent属性会使元素宽度超过100%，加上box-sizing:border-box;修复正常

8，jQuery，zepto中$.parseJSON()方法

json格式的字符串中，键值对必须用双引号包起来，除了属性值是数字的除外；单引号或者非数字的报如下错

错误格式：

正确格式：