2021-10-25 浏览器兼容遇到的问题

项目场景：

市面上常用的浏览器有：谷歌，新IE，FireFox，QQ，搜狗，Opera，360等。软件开发需要考虑到各种浏览器的兼容问题，这是一件很头疼的事情。
这里我尤其夸一下谷歌和Opera，兼容性做的很棒。FireFox兼容性是真差，新IE还不错，基本和谷歌一样。建议以后能把浏览器统一起来，给开发人员减轻点负担

---

问题描述：

这里记录几个目前遇到的问题：

1. 使用content替换img图片问题（FireFox）
2. 部分样式变形问题（FireFox、QQ浏览器）
3. FireFox浏览器无法使用reload()刷新页面
4. 百度地图无法加载（360浏览器、老式电脑系统）
5. select标签下拉框的滚动条样式(除了谷歌、新IE、Opera，其他浏览器都有。 目前处于待解决状态 )
   

---

解决方案：

1. 问题一：FireFox浏览器中，img的图片是没有办法通过content去更新替换的，只有更换src属性是可以的。使用content可以替换的是div标签。所以建议以后使用img标签显示图片使用src，如需动态切换图片，使用JS操作
2. 问题二：浏览器页面变形不兼容问题，尤其是FireFox，可以通过单独设置样式，做些小变动，来解决这个问题
3. 问题三：连同上一个问题，解决方法如下：

// 判断是不是火狐浏览器，其他类似
var userAgent = navigator.userAgent;
if (userAgent.indexOf('Firefox') > -1) {
	  // FireFox无法使用reload重新加载，可通过以下方式进行加载
      window.location.href = window.location.href;
}else{
    location.reload();
}

4. 百度地图无法加载，显示如下问题，注意：这个问题发生在win7系统，老机子上，使用自己的电脑上的360是正常的，经过研究发现问题原因是老式机子为了提高性能，默认安装时没有开启webGL的支持，导致出现的这个问题
   
   解决办法：
   开启浏览器的WebGL功能首先需要浏览器支持该功能，以chrome浏览器为例：

• 右击chrome浏览器的快捷方式，点击属性；
• 点击快捷方式选项卡，目标框原有内容后输入–enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files，然后点击确定
• 参数功能介绍：
  　　--enable-webgl表示开启WebGL支持；
  　　-gpu表示忽略GPU黑名单，也就是说有一些显卡GPU因为过于陈旧等原因，不建议运行WebGL，这个参数可以让浏览器忽略这个黑名单，强制运行WebGL；
  　　--ignore-gpu-blacklist表示允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL；
  　　只是想要看一下WebGL的Demo，那你可以不添加这个参数：
  –allow-file-access-from-files。
  5.问题五：目前不知道怎么解决，网上多数说::-webkit-scrollbar伪类去修改，但是这种方式只是在谷歌，新IE，Opera中有效，除了FireFox，其他浏览器在div标签中是有效的，在select中无效，在QQ浏览器中可以使用这种方式去掉默认样式。但是解决不了根本问题。