项目中遇到的兼容性问题

1、百度、QQ浏览器拨打电话问题

场景：

使用<a>标签 tel:协议，一键拨打电话功能下，正对含有分机号的情况，通常是拨打分机号后需以“#”结束，

App端能识别“#”，IOS、Android操作系统上的部分浏览器上不能识别“#”，将其解析成“%23”，

或者不识别“#”。

解决方案：

经查证浏览器解析该字符是会进行转码成16进制字符，经实践，将“#”字符写成“%23”，在使用H5中一键拨打电话Tel:协议时可以正常除。

示例代码：

         var tel = ‘400-610-1360转301661’;

       tel =
popTel.replace('转',',,')

       //tel +=’#’; 错误方式

         tel +=’%23’;

         <a id="callHotLine" href="javascript:;" class="call">拨打热线

         $(‘#callHotLine’).attr(‘href’,tel);
2、H5本地存储(localStorage)兼容性问题

场景：

IOS操作系统下Safari浏览器下使用H5本地存储localStorage无效，并报js错误，造成使用localStorage一下的脚本不能执行。

解决方案：

         经实践，采用cookie存储数据方式可以支持IOS操作系统下Safari浏览器的无痕浏览模式。

 代码示例：

         localStorage.vipflag = ‘1’;//无痕浏览模式下该语句报错，造成后面的语句不能执行

         引入jquery.cookie.js文件使用如下方式存储数据

         $.cookie('vipflag','1');

3、background图被边界切割掉的问题：

问题描述：每个输入框都会再有边靠边界地方增加一个叉号,往往是UI给提供的背景图，需要开发人员通过css样式表添加进去，在添加调试的过程中会遇到兼容性的问题，iPhone类型的手机显示正常，如iPhone6/6s等，安卓部分手机显示正常，如乐视，魅族等，但是华为、小米有些机型不大正常，经常会出现北京图被边界切掉了，经过查询资料，我们可以让北京图不依靠边界border展示，而是依靠padding展示，将background-origin设置成content-box,将padding边界设置成大小合适的即可

background详细介绍请参照 链文background详解   http://www.daqianduan.com/3302.html 

inline-block问题：<div><span></span><span></span><span></span></div> 对span标签使用inline-block样式，每个span标签占屏幕三分之一宽度，发现会出现折行，是因为line-block标签会存在默认间距，可以使用float:left消除改间隙，也可以使用margin-left设置负边距消除改间隙，方案消除间隙,
可以将 inline-block 元素的父元素font-size设置为0  

还可以采用下文中的  https://www.cnblogs.com/bigboyLin/p/4624805.html 的方案