最近项目开始大量使用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格式的字符串中,键值对必须用双引号包起来,除了属性值是数字的除外;单引号或者非数字的报如下错
错误格式:
正确格式: