项目场景:
市面上常用的浏览器有:谷歌,新IE,FireFox,QQ,搜狗,Opera,360等。软件开发需要考虑到各种浏览器的兼容问题,这是一件很头疼的事情。
这里我尤其夸一下谷歌和Opera,兼容性做的很棒。FireFox兼容性是真差,新IE还不错,基本和谷歌一样。建议以后能把浏览器统一起来,给开发人员减轻点负担
问题描述:
这里记录几个目前遇到的问题:- 使用content替换img图片问题(FireFox)
- 部分样式变形问题(FireFox、QQ浏览器)
- FireFox浏览器无法使用reload()刷新页面
- 百度地图无法加载(360浏览器、老式电脑系统)
- select标签下拉框的滚动条样式(除了谷歌、新IE、Opera,其他浏览器都有。 目前处于待解决状态 )
解决方案:
- 问题一:FireFox浏览器中,img的图片是没有办法通过content去更新替换的,只有更换src属性是可以的。使用content可以替换的是div标签。所以建议以后使用img标签显示图片使用src,如需动态切换图片,使用JS操作
- 问题二:浏览器页面变形不兼容问题,尤其是FireFox,可以通过单独设置样式,做些小变动,来解决这个问题
- 问题三:连同上一个问题,解决方法如下:
// 判断是不是火狐浏览器,其他类似
var userAgent = navigator.userAgent;
if (userAgent.indexOf('Firefox') > -1) {
// FireFox无法使用reload重新加载,可通过以下方式进行加载
window.location.href = window.location.href;
}else{
location.reload();
}
- 百度地图无法加载,显示如下问题,注意:这个问题发生在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浏览器中可以使用这种方式去掉默认样式。但是解决不了根本问题。