前端兼容性收集-持续更新

兼容性：
环境：ios 端，微信打开H5页面
问题描述：在登录页面，有输入手机号，以及输入验证码input框两个，点击其中一个后会弹出手机端键盘，导致整个页面上移动，将键盘隐藏后高度定位失败，导致底部有灰色背景条。并且使用fixed定位父元素后，页面元素点击混乱。
问题定位：fixed定位后，键盘弹出，元素往上顶，收起键盘后，元素渲染已经复位，但是元素点击框还是留在原地，导致点击元素不中，因为元素还在原来的位置。
解决方案：给input 框添加监听失去焦点事件，失去焦点时，页面滚到到顶部，就不会出现灰色背景条了。document.body.scrollTop = 0；document.documentElement.scrollTop = 0；

兼容性：
环境：支付宝小程序
问题描述：跳转到新页面，再返回到旧页面，旧页面高度定位错乱，高度不会随着页面内容高度改变而改变。
问题定位：使用页面其他元素跳转，在返回到旧页面没有问题。只有点击input输入框跳转新页面会导致这个问题出现。查看源码发现，监听的是input获取焦点事件，获取焦点就跳转新的搜索页面。
解决方案：给input添加一层遮罩层，获取遮罩层点击事件，然后进行跳转到新的搜索页面，测试后没有问题。

兼容性：
环境：android 系统，支付宝小程序
问题描述：地图组件使用label,字体颜色失效，在ios端显示正常
问题定位：操作系统兼容性问题
解决方案：在label 配置对象中，color：#fff; 配置使用了3个“#fff”, 改为6个"#ffffff"后, label字体颜色显示正常

兼容性：
环境： 支付宝小程序，使用真机测试
问题描述：map地图组件，如何处理全屏显示问题，高度height:100% 没有生效。
问题定位：高度不能使用百分百
解决方案：
方案1 使用my.getSystemInfo 获取设备高度，然后绑定到页面中 height: {{screenHeight}}px; 处理后，地图能够占满全屏，但是出现兼容性问题：地图缩放功能混乱、 不能定位居中坐标。所以没有再测试，放弃该方案。
方案2 既然在地图中上下滑动不会出现滚动条，尝试把map组件的高度设置一个很大的值，测试可以。采用方案2.给map添加父元素view, 然后设置高宽为100%， map组件高度为 800px）

兼容性：
环境：android 系统
问题描述：字体居中使用 line-height 没有生效
问题定位：字体大小小于12px, 导致字体不能居中
解决方案：查看各种资料，没有完美解决方案，暂时采用比较有兼容性修复方案，使用css3 缩放

兼容性：
环境：在微信公众号中H5(微信浏览器)，ios 系统和android 系统
问题描述：字体颜色没有生效，但使用手机其他浏览器访问没有异常，除了微信。
解决方案：检查css样式，发现字体颜色属性为， color: #ffff; 因为使用了4个f,而不是使用3个fff， 导致兼容性问题，删除一个f 后属性为， color: #fff; 测试后字体颜色显示正常。