一、
场景：前几天改了一个h5直播列表页面，内嵌在app里面，也可以分享出来单独打开。展示图片的部分，原先使用img标签常规做的，多图的时候得排版设定宽高，这样容易导致图片被压缩，这次我就把图片用背景图的方式展示，background-image:url(....)，background-size:100%。点击图片的时候用swiper做，能放大轮播。
app端，在页面加载进来的时候就把标签上获取的图片拼接成字符串传递过去;
h5端，用js直接调用即可；
demo：https://jiafei2333.github.io/html/js_safari.html （分别在以下两种场景中打开，可看到不同的返回结果）
①chome、手机端浏览器，手机端safari都没有问题，能获取到；
②mac pro的safari、app端 获取到的background里面的图片路径与上面的不同，如图
图① Chrome中的断点截图
文章图片
url("https://................");
图② mac pro上safari中的断点截图
文章图片
url(https://...............);
结论：2种浏览器里面获取background url 的结果不同，所以导致直接用substring截取到的url有偏差。
【前端页面中 不同浏览器之间的兼容问题归类】
推荐阅读
- JavaScript|web前端入门到实战（好用的Js图表库）
- 接口访问加密方式
- 实用技术|Chrome 技术篇-常用web调试手法（清除缓存并硬性重新加载）
- 有关easyUI的拖动操作中droppable，draggable用法例子
- web前端|CSS科技感四角边框
- ColorBox 演示和说明/API
- SUI 列表 底部无限滚动
- js把时间戳转化为时间
- js jq获取标签的各种方式整理
- WEB前端|用HTML5canvas绘制一个圆环形的进度表示