兼容性问题处理

常见浏览器兼容性问题处理方案

1、使用浏览器前缀区分不同浏览器的实现方式

2、使用polyfill。在旧版浏览器中模拟新特性的实现。

3、使用特性检测。判断浏览器是否支持某些特性的方法。（使用Modernizr库来检测浏览器是否支持某些HTML5和CSS3特性）

4、使用CSS hack。根据不同浏览器的特性来实现样式差异的方法。（使用IE hack来解决IE浏览器的样式问题）

5、使用CDN。根据不同浏览器的特性来实现样式差异的方法

项目中遇到的兼容性问题：

1、不同浏览器标签默认的外补丁和内补丁不同

解决方案：*{margin:0;padding:0}

*** 支付宝不支持部分CSS属性或值。（部分CSS3样式不支持）

1、position：sticky（吸顶效果）在支付宝中不支持，可用js实现类似效果。

2、text-overflow：ellipsis（超出内容省略号）在支付宝中不支持，可用webkit-box-orient: vertical 和 -webkit-line-clamp 来实现省略号效果。

3、linear-gradient 和 radial-gradient（渐变效果）在支付宝中不支持，可用图片或SVG代替

4、filter（裁剪效果）在支付宝中不支持，可用js实现类似效果

5、transform-style: preserve-3d（3D变换）在支付宝中不支持，可以使用 transform 属性的 3D 功能来代替

6、transition: all（过渡效果）在支付宝中不支持，可以使用 transition 属性的单个属性来代替。

7、box-shadow（阴影效果）在支付宝中不支持，可以使用 background-image 和 border 属性来代替。

8、outline（轮廓线）在支付宝中不支持，可以使用 box-shadow 属性来代替。

*** 支付宝不支持部分javascript

1、eval()函数。可用setTimeOut()来替代。

2、Function()构造函数。

3、document.write()方法。可用静态HTML文件来替代。

问题：replaceAll浏览器不兼容问题

解决方案
使用正则替换
src.replace(/:/g, "-")   //将src中的 ':' 全部替换为 '-' 

src.replace(new RegExp(":","gm"), "-")