一、浮动问题
简述：
我们在平时切页面时,经常会出现用完浮动(float),忘记删除.下面的布局出现莫名其妙的空白高度,导致布局调整失败
避免使用浮动
二、
链接: http://blog.csdn.net/chenmoquan/article/details/41547609
1、水平居中—使用 text-align
2、margin: auto 居中
3、table-cell 居中
4、Absolute 居中
5、使用 translate 居中
6、使用 Flexbox 居中
7、使用 calc 居中
三、常见的兼容性问题
四、css hack
五、css filter
六、更换渲染模式
七、浏览器内核
八、让H5页面适应所有的iphone手机以及安卓机型的六大技巧
九、REM 布局
什么是兼容性测试兼容性测试是指测试软件在特定的硬件平台上、不同的应用软件之间、不同的操作系统平台上、不同的网络等环境中是否能够很友好的运行的测试。–【百度百科】
为什么要做兼容性测试
目前碎片化十分严重，尤其是安卓设备。安卓设备碎片化、品牌碎片化，大家熟知的安卓品牌都有好多家，每家可能还有定制的系统，都给我们适配带来了不小的挑战。除了上面的碎片化，当然还有系统版本碎片化，屏幕碎片化等，为了给用户更好的用户体验，做APP的兼容性测试，还是非常有必要的。
兼容性影响因素
用户
硬件
软件
技术
网络
影响因素大致可以分为以上几类，我们对所测APP做兼容性测试时，可以从以上方面去考虑。
1、用户
我们需要依据自身APP用户群体的特征以及使用习惯，去做相应的兼容。比如用户群体如果大多是老人的话，可以考虑大字体的适配。比如针对旅游人士，可以考虑过程中网络的状况。如果拥有大量海外用户，可以考虑多币种、多语言、多度量、时区问题。
2、硬件
设备类型（手机、平板、穿戴式设备）
生产商（安卓手机存在每个厂商的定制化差异）
显示屏（屏幕大小、分辨率）
特殊硬件功能（NFC、蓝牙、相机、定位功能等）
3、软件
操作系统
浏览器内核
伴生应用
4、技术
RN、H5、native
开发语言(oc、swift）
5、网络
2G、3G、4G、wifi
兼容各种网络下APP的表现
iOS APP兼容性
屏幕分辨率
屏幕尺寸（含异形）
操作系统版本
Xcode版本
开发语言
第三方库或SDK
安装、升级
Android APP兼容性
屏幕分辨率
屏幕尺寸（含异形）
Android版本
系统版本
处理器架构（arm、x86）
开发语言（Java、koltin、混合）
第三方库或SDK
安装、升级
H5兼容性
CSS样式兼容（一些属性的浏览器标示前缀没有添加，导致默认浏览器不认识这个属性，所以样式错乱。有些布局不灵活，样式边界处理不好，导致宽窄屏显示异常）
JS兼容（主要是浏览器或者系统版本，新的js api不支持，但是没有做降级处理）
第三方库或SDK
框架（react、vue……）
缓存（sessionstorage、localstorage）
哪些场景需要做兼容性验证
UI显示
多次快速点击
拉起虚拟键盘挡住输入区
虚拟物理按键收起与显示
多个输入框来回切换
控件焦点热区文体
前后台、多个应用切换
指纹识别和faceid等
框架升级
网络
新老版本兼容
第三方依赖库或者SDK升级
前后端版本兼容
如何做兼容性测试
主要分为内部和外部。内部由测试人员自己覆盖主要机型。机型选取的原则是，根据自己APP用户的机型，选取至少top10进行人工兼容性测试。内部还可以进行的就是UI自动化测试。外部可以借助云测平台，比如testin、testbird等。
1.H5网页touch滑动的时候在苹果手机上出现不流畅的问题
-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果.
解决办法：给所有网页添加如下样式
说明：
-webkit-overflow-scrolling: touch当手指从触摸屏上移开，会保持一段时间的滚动
-webkit-overflow-scrolling: auto当手指从触摸屏上移开，滚动会立即停止
2. css 苹果手机按钮默认样式如何去掉
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none}
textarea { -webkit-appearance: none}
3. 如果还有圆角的问题，
** 4.苹果手机不支持box-shadow属性**
如果先给input写边框，用 border:1px solid #ccc
5、去除Chrome等浏览器文本框默认发光边框
6.去掉高光样式：
当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。
7、去除IE10+浏览器文本框后面的小叉叉，只需下面一句就ok了
input::-ms-clear {display: none}
8.H5页面写出来，在chrome中出现如下错误，只需添加如下css即可解决
*{touch-action: pan-y}
